Using UMD to create Singleton Instance across Micro Frontends

[NikJ87]

Hi,

I have a use case where I want to shared Singleton instance across Microfrontend with following condition:

1. First Micro frontend created in Vanilla JS
2. Other Micro frontend created in React JS
3. which ever load first initializes the instance of my JS script and other while loading just uses it.

I was looking forward to use UMD but couldn't work it out without attaching initialised instance to window object. But I don't want to expose it at global variable level.

[HariharanUmapathi]

As per my under standing of your query ill assume the following things
1.You created a module based on UMD namely myMicroFrontend that is used by another vannila js script
2.You created a component on React JS that requires your myMicroFrontend

you need a hack to achieve the singleton instance across the code without a global declaration

you can try custom events to load your micro frontend 😁 but without global variable how you store if your microfrontend has loaded ? how you know it its not loaded because javascript is not syncronous by default