Module Federation
Module Federation is a specific implementation technique for runtime composition, solving the problem of sharing dependencies without build-time coupling.
What it is
Section titled “What it is”It allows an application to dynamically load code from a “remote” application. It manages dependency sharing, ensuring that shared libraries (like React) are only loaded once if versions are compatible.
Alternatives
Section titled “Alternatives”- Native ES Modules: Using
import-mapsto load remote modules without a bundler. - Iframes: Strongest isolation but highest performance and UX overhead.
When it works well
Section titled “When it works well”- Dynamic Composition: A “host” app that can load “plugins” or “widgets” at runtime.
- Shared Design Systems: Providing a living component library that updates across apps without redeploying them.
When it becomes problematic
Section titled “When it becomes problematic”- Runtime Reliability: If a remote goes down or breaks its API, the host app may fail.
- Version Hell: Mismatched singleton dependencies (e.g., two versions of React) can cause obscure runtime bugs.
- Tooling Lock-in: Historically tied to Webpack 5, though Vite and Rspack now have support.
Technical Complexity
Section titled “Technical Complexity”High. Requires deep knowledge of bundler configuration and orchestration logic.
Related Patterns
Section titled “Related Patterns”- Micro Frontends — Organizational pattern that often uses Module Federation
- Web Components — Alternative runtime composition with native standards