Module Federation: singleton: true not working — remotes bundle separate copies of react-oidc-context #4586
Unanswered
nicatabdullay3v
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
I have a host app with multiple remotes using @module-federation/vite.
Even though all shared deps are configured with singleton: true, each remote still bundles its own full copy of react-oidc-context instead of reusing the host’s instance.
Because of that, every remote creates its own AuthContext, so useAuth() returns undefined inside remotes.
What I see
In the Network tab, the react-oidc-context chunk loaded from remotes contains the full library code, for example:
var AuthContext = React.createContext(void 0);
var AuthProvider = (props) => { ...full implementation... }
This should be a stub referencing the host’s shared singleton, not a full bundled copy.
Strange part
I have two host apps using the same remotes and almost identical federation config:
web-portal → works correctly
admin-portal → broken
In web-portal, only one shared copy of react-oidc-context is used.
In admin-portal, each remote loads its own copy.
Result
With only 1 remote connected, everything works.
With 2 or more remotes, it breaks consistently on page load.
Errors
Most common error:
TypeError: Cannot read properties of undefined (reading 'user')
Also:
AuthProvider context is undefined, please verify you are calling useAuth() as child of a component.
And when trying import: false:
Shared module 'react-oidc-context' must be provided by host
Why I think shared modules are not actually shared
One error stack shows usePermissions from one remote and React renderer code from another remote, which strongly suggests multiple isolated React / context instances are running.
Expected
Remotes should consume the host’s singleton instance of react-oidc-context.
Actual
Each remote loads its own full copy of react-oidc-context, creating separate contexts and breaking useAuth().
Versions
@module-federation/vite: ^1.12.3
All apps use singleton: true for:
react
react-dom
react-router-dom
react-redux
@reduxjs/toolkit
react-oidc-context
oidc-client-ts
Beta Was this translation helpful? Give feedback.
All reactions