Module Federation shared dependencies need explicit version constraints
#webpack
#micro-frontends
#javascript
Module Federation has this wonderful feature where it lets two different versions of React run simultaneously in your app. I say “wonderful” because it will absolutely not tell you it’s doing this. Everything works. Until it doesn’t. And then you’re staring at a hook error that makes zero sense.
The fix: stop being lazy with the shared config.
// This looks clean. It's a trap.
shared: ['react', 'react-dom']
// This is what you actually want.
shared: {
react: {
singleton: true,
requiredVersion: deps.react,
strictVersion: true
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
strictVersion: true
},
}
singleton: true = one React to rule them all. strictVersion: true = blow up loudly if versions don’t match. Loud failure beats two hours of “why is useState returning undefined.”
The deps reference is just require('./package.json').dependencies. Nothing fancy. The fancy part was the debugging session that led me here.