Uncaught Error: Invalid hook call.
You might have more than one copy of React in the same app.
If you are using Webpack Module Federation with multiple micro frontends, this error means you have duplicate React instances in memory.
Every MFE bundles its own React, ReactDOM, and Router by default. With 5 remotes, that is 5 copies of React the browser loads, parses, and executes. The performance waste is bad. But the real problem is hooks breaking - two React instances means two separate hook registries that cannot talk to each other.
The fix is Module Federation's shared config with singleton: true. But there is more to it than copy-pasting one config line.
What the full guide covers:
- The duplicate bundle problem - real KB numbers showing 57% reduction
- singleton: true vs false - step-by-step runtime behavior
- requiredVersion strategies - 4 different approaches with trade-offs
- strictVersion and eager - when to use each (React vs Next.js)
- Host vs Remote shared config - why they are different
- What to share vs NOT share - decision table with 11 libraries
-
Runtime debugging - inspecting
__webpack_share_scopes__in DevTools
All code examples from a production micro frontend monorepo.
Read the full guide with code examples: https://blog.srinudesetti.in/micro-frontend/react/shared-dependencies-singleton-pattern
