Stop 20 · Advanced TopicsTopics · 8/14

Module Federation

In short

Module Federation lets one deployed app load components from another deployed app while running, without rebuilding. It's the most common way to wire micro frontends together.

A Webpack feature that lets separate, independently built applications share code and dynamically load each other's modules at runtime — the most common technical approach to micro frontends.

The jaadu shares one power bank with cables running to three roommates' phones.

Think of it like this

Shared power bank at the hostel

Instead of each room buying a power bank, one room lends theirs and everyone plugs in when needed. With Module Federation, one app exposes components, others plug in at runtime, and big libraries like React are shared instead of duplicated.

Watch it happen

The shell loading the cart widget

Shell (host)

Cart server

GET remoteEntry.js

1/6At runtime the shell fetches the cart app's remoteEntry.js file.

The big ideas

What you need to know

Remotes expose

A remote app lists which modules it shares, like ./CartWidget, in a remoteEntry.js file.

Hosts consume

A host app knows where each remote lives and imports its modules as if they were local.

Shared dependencies

Mark React as a shared singleton so the host and remotes use one copy.

Beyond Webpack

It started in Webpack 5. Rspack supports it, and community plugins bring it to Vite.

See it in code

Walk through the code

1const { ModuleFederationPlugin } = require("webpack").container;2const shared = { react: { singleton: true }, "react-dom": { singleton: true } };3// In the cart app (remote)4new ModuleFederationPlugin({5  name: "cart",6  filename: "remoteEntry.js",7  exposes: { "./CartWidget": "./src/CartWidget" },8  shared,9});10 11// In the shell app (host)12new ModuleFederationPlugin({13  name: "shell",14  remotes: { cart: "cart@https://cart.example.com/remoteEntry.js" },15  shared,16});

1/3Get the plugin, and mark React as a shared singleton for both apps.

In the shell, React.lazy(() => import("cart/CartWidget")) now loads the cart team's latest deploy at runtime. Each plugin goes inside its own app's plugins array.

Save yourself the pain

Common mistakes

Oops

Forgetting to share React, then getting "Invalid hook call" errors.

Do this instead

Mark react and react-dom as shared singletons in both host and remote.

Oops

Assuming a remote is always online.

Do this instead

Wrap remote components in an error boundary with a fallback, so a broken remote doesn't crash the shell.

Your mission

Wire a host and a remote

~45 min

Quick check

After setting up Module Federation, you see "Invalid hook call" when the remote component renders. What's the likely cause?

Go deeper

1Read a walkthrough of two apps sharing a component via Module Federation.
2Learn the 'host' and 'remote' terminology used in Module Federation setups.
3Understand this solves independent-deployment problems that a single monolith app doesn't have.