Module Federation Cheat Sheet

How to use this Module Federation cheat sheet

The host webpack config lists remotes by name and URL; remotes expose modules in federation config. shared declares singleton dependencies (react, react-dom) with requiredVersion to dedupe across apps.

eager: true bundles shared deps in the entry chunk (host often eager for React); eager: false loads shared async. Version mismatches fall back or warn depending on singleton and strictVersion settings.

Quick Module Federation example

// webpack.config.js — remote
new ModuleFederationPlugin({
  name: 'shop',
  filename: 'remoteEntry.js',
  exposes: { './ProductPage': './src/ProductPage' },
  shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
});

// host
new ModuleFederationPlugin({
  name: 'shell',
  remotes: { shop: 'shop@https://cdn.example/shop/remoteEntry.js' },
  shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true } },
});

Host & Remote Roles

Shared Dependencies

Versioning & Deployment

Eager vs Async Loading

Lazy federated route in React

const ProductPage = React.lazy(() => import('shop/ProductPage'));

function Routes() {
  return (
    <Suspense fallback={<Spinner />}>
      <Route path="/products" element={<ProductPage />} />
    </Suspense>
  );
}

Wrap federated components in Suspense; network load happens on first navigation.

Dynamic remote at runtime

const remoteUrl = window.__REMOTES__.shop;
await __webpack_init_sharing__('default');
const container = await import(/* webpackIgnore: true */ remoteUrl);
await container.init(__webpack_share_scopes__.default);
const factory = await container.get('./ProductPage');
const Module = factory();

Advanced pattern for runtime-configured remote URLs (micro-frontend shell).

Nx module federation project.json stub

{
  "targets": {
    "serve": { "options": { "port": 4201 } }
  },
  "tags": ["scope:shop", "type:remote"]
}

Monorepo tools generate federation config; keep remote serve ports documented for local dev.

Common mistakes

• Mismatching React versions across host and remotes with singleton disabled.
• Hard-coding remoteEntry URL without environment-specific config for dev/staging/prod.
• Exposing entire app root instead of narrow module APIs, coupling host to remote internals.
• Caching remoteEntry.js aggressively while changing exposed module paths without coordination.

Key takeaways

• Host consumes remotes; remotes expose modules via remoteEntry.js.
• shared + singleton dedupes react and other libraries at runtime.
• eager loads shared in entry; lazy import defers federated UI until needed.
• Version remote URLs and run contract tests before promoting remote deploys.