How to initialize a component from another micro frontend that lazy loaded - lazy-loading

Question

I'm working on a micro frontend application.
The MFEs are lazy-loaded when needed. Each MFE exposes components. In order to minimize the coupling between the MFEs, it is suggested to avoid passing props and callbacks between the MFEs and rely on indirect communication like Pub/Sub pattern (we would like to be framework agnostic). I saw there are a few libraries that provide to subscribe for events / specific topics and publish events and some of them also support retrieving the latest event.
So it will be something like this:
MFE A need to initialize a component B.X from MFE B with some initialization data
MFE A publishes event - topic: "B.X init" data:{...}
MFE A render component B.X
MFE B is loaded and initialized (in case it has not loaded yet)
MFE B subscribe to the event with the topic "B.X init"
MFE B initialize component X with the received data
My questions are:
Is there a better way of doing it?
In the case of 2 instances of the same component, how to initialize each one of them with different data? another info about that?
Thanks

Answer 1

I will try to answer the "big" parts and leave details/implementation to you as this question has many implied questions within it.
I would say it seems wrong for 1 MFE to access another MFE component (Also how are you exposing this inner component?)
It seems that when developing you have to run another MFE (or at some stage maybe all of them) in order to have a single component available to another MFE - you should strive to keep them non coupled as you wrote yourself.
I suggest to share some common components combined with an events system.
This is a pic (from the link at the bottom) that illustrates sharing of common components(or other stuff like util library).
I will show the basic approach:
Make a shared library exposing shared components
{
"name": "#shared/ui",
"type": "module",
... rest of values
}
Import in each MFE using it
//package.json
"dependencies": {
"#shared/ui": "*"
}
//MFE
import { MyButton } from '#shared/ui';
function App1() {
return (
<div>
<div>App 1</div>
<MyButton/>
</div>
)
}
This is a static import - according to your needs you can add an event listener that changes the state of the MFE and causes a re-render (you can find many examples on SO) with the value received in the published event.
Check my answer here for basic events communication - this is a basic pub/sub system that should satisfy your requirements.
So to summarize:
Share common components
Communicate using events
In MFE:
Import shared components
Listen/subscribe to the relevant events - init(and render) the shared components using your logic
Extra:
If you have a shell app the "holds" the structure and acts as an entry point you can add this shared library to the shared part of Webpack5 & Module Federation (in the shell app).
Hope this helps - it's basic but if you get the idea you can advance in your direction from here. Questions/comments welcome.
BTW - this heavy read by Oreilly is just amazingly good! Check the part under headline "Module Federation" for code sharing.