Webpack Module Federation — Complete Guide for Micro Frontends

Error: Invalid hook call. Hooks can only be called inside
       the body of a function component.

You've seen this error. Your component works in isolation. But the moment you load it as a Module Federation remote inside the host — hooks crash.

The cause: React loaded twice. Module Federation shared your component code, but not React itself. Two React instances mean two internal state trees, and hooks break immediately.

The fix is one line — singleton: true — but Module Federation has 5 more configuration traps that will bite you in production:

• Remote URLs change completely between local (https://localhost:4002/remoteEntry.js) and production (/products/remoteEntry.js)
• publicPath must match the reverse proxy route — mismatch = 404 on every chunk after remoteEntry.js loads
• The bootstrap pattern is required — without import("./bootstrap"), shared deps fail before negotiation happens
• remoteEntry.js is NOT your bundle — it's a ~5KB manifest that registers window.Products for on-demand chunk loading
• requiredVersion doesn't enforce — with singleton, the first-loaded version always wins. It only warns.

I wrote a complete guide with real webpack configs for host and remote (both local dev and production), all exposed modules mapped, shared dependency configuration with the singleton pattern, how remoteEntry.js works step by step, and a debugging checklist for the 5 most common errors.

Read the full guide with code examples → https://blog.srinudesetti.in/micro-frontend/react/webpack-module-federation-complete-guide