# Microfrontends & Module Federation

> Independently deployable frontends composed at runtime in the browser.

Frontend architecture guidance from fearchitect, written by Abas Turabli and last reviewed 2026-06-21. Source: https://fearchitect.com/topics/microfrontends-module-federation

Use it as reference for the task at hand. Before changing code, check this guidance against the codebase: where the code already makes a different, deliberate choice, flag the conflict instead of rewriting it. Library APIs move faster than this guide, so confirm exact signatures in the official docs linked at the end.

## Summary

Microfrontends split a single frontend into separately owned, separately deployed slices. Webpack and Rspack Module Federation wire them together at runtime: one host app loads remote chunks on demand, sharing singletons like React across the boundary. The tradeoff is team autonomy against a new class of runtime dependency failures.

## Microfrontend

A microfrontend is a vertical slice of UI owned by one team — its own repo, build, and deploy pipeline. The browser assembles the page from multiple independently deployed artifacts.

**Module Federation** (Webpack 5 / Rspack) is the dominant runtime integration mechanism. A remote exposes modules via `exposes` in its `ModuleFederationPlugin` config; a host declares those remotes in `remotes` and imports them as local. The host fetches the remote's manifest at runtime, then loads only the needed chunks.

**Build-time vs runtime:** npm packages are build-time — simpler but every consumer rebuilds on change. Module Federation is runtime — a remote's latest build is live to all hosts on deploy.

## Diagram

```mermaid
graph LR
    Browser -->|1. loads| Shell["Shell (host)"]
    Shell -->|2. fetches| RE["catalog/remoteEntry.js"]
    RE -->|3. chunk on demand| PC["ProductCard chunk"]
    Shell -->|shared singleton| React["React 18 (one copy)"]
    PC -->|shared singleton| React
```

Host loads the remote's manifest, then fetches only the needed chunk; both sides share one React instance negotiated by federation.

## Module Federation config — host and remote

The remote exposes a component at a stable key; the host maps that key to a CDN URL. Both declare React as a singleton so one copy runs in the page.

**ModuleFederationPlugin — host and remote (Webpack 5)**

```js
// remote/webpack.config.js — the "catalog" microfrontend
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  output: { publicPath: "auto" },
  plugins: [
    new ModuleFederationPlugin({
      name: "catalog",
      filename: "remoteEntry.js",
      exposes: {
        "./ProductCard": "./src/components/ProductCard",
      },
      shared: {
        react: { singleton: true, requiredVersion: "^18.0.0" },
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
      },
    }),
  ],
};

// host/webpack.config.js — the shell app
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "shell",
      remotes: {
        catalog: "catalog@https://cdn.example.com/catalog/remoteEntry.js",
      },
      shared: {
        react: { singleton: true, requiredVersion: "^18.0.0" },
        "react-dom": { singleton: true, requiredVersion: "^18.0.0" },
      },
    }),
  ],
};
```

The host imports `catalog/ProductCard` via `React.lazy`; Webpack fetches `remoteEntry.js` at runtime, then the component chunk only when it first renders.

## Tradeoffs

**Pros**

- Teams deploy independently — no cross-team coordination per release.
- Runtime integration: consumers see remote changes without rebuilding.
- Shared singletons prevent duplicate React or router instances when configured correctly.
- A crashing remote can be isolated behind an error boundary.

**Cons**

- Version-skew in shared deps causes subtle runtime bugs.
- Cold-load waterfall: host fetches remoteEntry.js, then chunks — adds latency.
- Every remote is a separate CDN deployment to monitor and version.
- Local dev needs all remotes running or mocked; DX degrades fast.

## Watch out: Version-skew in shared singletons

If host requires React 18.3 and a remote ships 18.2, federation picks the higher compatible version. If versions are truly incompatible, the remote loads its own copy — doubling React in the page and breaking hooks context. Both sides must declare the same dep in `shared` with matching `requiredVersion` ranges, or federation cannot negotiate a single instance.

## Key terms

- **Host**: The app that consumes remote modules at runtime; declares `remotes` in its federation config.
- **Remote**: A separately deployed build that exposes modules via `exposes` and a `remoteEntry.js` manifest.
- **exposes**: Federation config key mapping a public name to an internal module path the remote makes consumable.
- **shared singleton**: A dep declared `singleton: true` so federation loads one copy across all host/remote boundaries.
- **Multi-Zones**: Next.js feature routing separate Next.js apps by URL prefix via a reverse proxy; no shared JS runtime.

## Related topics

- [Monorepos (Turborepo / Nx)](https://fearchitect.com/topics/monorepos.md): One git repo, many packages, shared tooling and task caching.
- [Bundle Architecture & Code Splitting](https://fearchitect.com/topics/bundle-architecture-code-splitting.md): Ship only the JS a route needs, cache the rest long-term.
- [Backend for Frontend (BFF)](https://fearchitect.com/topics/backend-for-frontend.md): A per-client server layer that shapes and aggregates APIs for one frontend.
- [Component Architecture & Project Structure](https://fearchitect.com/topics/component-architecture.md): Structuring components so composition beats configuration.
- [Incremental Migration / Strangler Fig](https://fearchitect.com/topics/incremental-migration-strangler-fig.md): Replace a legacy frontend route-by-route behind a shared proxy.
- [API Gateway (for Frontends)](https://fearchitect.com/topics/api-gateway.md): Single entry point that routes, authenticates, and rate-limits across services.

## Further reading

- [Webpack — Module Federation](https://webpack.js.org/concepts/module-federation/)
- [Rspack — Module Federation](https://rspack.dev/guide/features/module-federation)
- [Next.js — Multi-Zones](https://nextjs.org/docs/app/guides/multi-zones)
- [Martin Fowler — Micro Frontends](https://martinfowler.com/articles/micro-frontends.html)