Shared Dependencies & Version Management
Learn how Module Federation shares libraries across micro frontends, how singletons and version negotiation work, and the best practices that prevent duplicate bundles and runtime breakage.
Why Sharing Matters
In a Module Federation setup every remote can bundle its own copy of react, react-dom, or a design system. Without coordination, a single page may load three copies of React.
Shared dependencies let independently deployed apps agree on a single instance of a library at runtime, cutting payload and avoiding state bugs.
The shared Key
Both host and remotes declare a shared block in their ModuleFederationPlugin config. Webpack then negotiates which version actually loads.
new ModuleFederationPlugin({
name: 'host',
shared: {
react: { singleton: true },
'react-dom': { singleton: true }
}
})All lessons in this course
- Monorepos vs. Polyrepos
- Organizational Challenges & Solutions
- Future of Micro Frontends & Federation
- Shared Dependencies & Version Management