Module Federation — Share Code Between Independent Web Applications at Runtime

Introduction

Module Federation solves the problem of sharing code between separately deployed web applications. Instead of publishing packages to npm and rebuilding consumers, federated modules are loaded at runtime from their host URL. This enables teams to deploy independently while sharing components, utilities, and even state across applications.

What Module Federation Does

• Enables runtime module sharing between independently deployed webpack builds
• Allows any webpack build to expose and consume modules from other builds
• Manages shared dependency versions to avoid duplicate React, lodash, or other libraries
• Supports bidirectional sharing where any app can be both host and remote
• Works with React, Vue, Angular, and vanilla JavaScript applications

Architecture Overview

Module Federation extends webpack's module system to load remote containers over HTTP at runtime. Each federated application produces a remoteEntry.js manifest listing its exposed modules and shared dependencies. When a host application imports a federated module, webpack's runtime fetches the remote container, negotiates shared dependency versions, and wires the module into the host's dependency graph transparently.

Self-Hosting & Configuration

• Add ModuleFederationPlugin to each webpack 5 configuration
• Define exposes to share modules and remotes to consume them
• List shared dependencies to prevent duplicate bundles at runtime
• Deploy each application independently to its own URL or CDN
• Use @module-federation/enhanced for Rspack and Vite support

Key Features

• Zero-rebuild sharing: update a remote module and all consumers get the new version instantly
• Version negotiation for shared dependencies prevents duplicate library loads
• Framework agnostic: works with React, Vue, Angular, Svelte, and vanilla JS
• TypeScript support via @module-federation/typescript for type-safe remotes
• Server-side rendering support for Node.js federated modules

Comparison with Similar Tools

• npm packages — Require rebuilding and redeploying consumers; Module Federation updates at runtime
• Micro frontends via iframes — Isolated but heavy; Module Federation shares a single React instance
• single-spa — Framework for mounting micro frontends; Module Federation handles module loading
• Import maps — Browser-native module resolution; Module Federation adds version negotiation and shared deps
• Turborepo/Nx — Monorepo build tools; Module Federation enables independent deployment

FAQ

Q: Does it work with frameworks other than React? A: Yes. Module Federation is framework-agnostic and works with Vue, Angular, Svelte, and vanilla JavaScript.

Q: What happens if a remote module is unavailable? A: The import fails like any network request. Use React.lazy with error boundaries or dynamic import catch blocks to handle failures gracefully.

Q: Can I use it without webpack? A: The @module-federation/enhanced package supports Rspack and Vite. The core concept now extends beyond webpack.

Q: Does it increase bundle size? A: The runtime overhead is minimal (a few KB). Shared dependencies reduce total download size across micro frontends.

Sources

• https://github.com/module-federation/module-federation-examples
• https://webpack.js.org/concepts/module-federation/