Global store for use in MFE architecture?

[chriskulwik]

Hello all,

I've been working on restructuring an existing app using MFE architecture. Running into some issues with pinia, I believe because both my host app, and my micro-app, have an instance of a pinia store.

To use MFE correctly, the micro-apps and host app should be independent, so this suggests that a global store for pinia is possible. I found this repo which is what I'm looking for, but for redux.

Any one else run into this? Attached is the error I see when trying to display the micro-app in the host app.

[chriskulwik]

Part of the problem was the name value in my package.json (found this herehttps://github.com/webpack/webpack/issues/15582)

Seems like this is also needed in the webpack.config when configuring the ModuleFederationPluging:
shared: {
...
pinia: {
singleton: true,
requiredVersion: deps.pinia,
},
}

Now I have a pinia store on the host application working, I can import one micro-app, and it's store works fine. However if I add a second micro-app, the pinia store from the second seems to override the first. Maybe it's only possible to have one micro-app with a pinia store, not sure yet...

[chriskulwik]

The issue ended up being related to hot reloading. Turning hot reloading off for the micro-apps fixed the problem. This boolean is in the webpack.config file.