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…