Zustand store is created multiple times

[hqlinh]

Describe the bug

I have a host app and a remote app. They both use the same react and zustand version.
The host app exposes zustand store. The remote app exposes a react component.
When I start 2 apps, zustand store is created 2 times, leading 2 instances are created. One for host app, and one for remote app.
When update store from zustand, the value of store in remote doesn't change.

Reproduction

https://github.com/hqlinh/microfrontend

Used Package Manager

yarn

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M2
    Memory: 106.80 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.19.0 
    Yarn: 1.22.22 
    npm: 10.9.3 
    pnpm: 10.17.0
  Browsers:
    Chrome: 143.0.7499.170
    Firefox: 139.0.4
    Safari: 17.6

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[thefat32]

Add zustand as singleton in your shared section of module federation config for both apps

  shared: {
    ...
    zustand : { singleton: true },
  },

[ScriptedAlchemy]

I pulled the repro (hqlinh/microfrontend, current main) and the core issue is that the state module is consumed through two different module paths, which creates two instances.

In the repro now this shows up with React context (same pattern applies to Zustand store objects):

• host uses local import: host/src/routes/page.tsx -> @/store
• remote uses federated import: app1/src/components/ProviderComponent.tsx -> host/store

Those do not necessarily resolve to the same runtime module instance, so host updates one instance while remote reads another.

shared: { zustand: { singleton: true } } is still recommended, but by itself it does not guarantee a single store instance if the store module itself is initialized twice.

Two reliable fixes:

1. Move the store into a separate shared package (e.g. @acme/store) and import that package from both host and remote, with singleton sharing enabled.
2. Or make host consume the same federated specifier as remote (self-reference pattern), so both sides import host/store instead of host using @/store locally.

If helpful, I can post a concrete config/code patch for either option.

[github-actions]

Stale issue message