Module Federation

Module Federation lets separately deployed bundles load each other’s code at runtime. Interviewers test runtime composition, shared dependency deduplication, and operational failure modes — not webpack novelty.

Host, Remote & Exposed Modules

Definition

// Remote (checkout team)
// new ModuleFederationPlugin({
//   name: 'checkout',
//   filename: 'remoteEntry.js',
//   exposes: { './CheckoutApp': './src/CheckoutApp.jsx' },
//   shared: { react: { singleton: true } },
// });
 
// Host (shell team)
// new ModuleFederationPlugin({
//   name: 'host',
//   remotes: {
//     checkout: 'checkout@https://cdn.example.com/checkout/remoteEntry.js',
//   },
//   shared: { react: { singleton: true } },
// });
 
async function mountCheckout(el) {
  const { mount } = await import('checkout/CheckoutApp');
  mount(el);
}

Host → fetch remoteEntry.js → read manifest → load exposed chunk → render remote UI

• exposes — public API surface of the remote; treat as semver contract
• remotes — URL map on the host; CDN deploy is part of the contract
• Dynamic import — federation runtime loads remote containers lazily

The host does not bundle remote code at build time. Business reason: runtime composition + independent deploy.

Interview: Federation trades operational complexity for organizational autonomy — not a DX upgrade over monorepo imports.

Shared Dependency Configuration

Definition

shared tells the federation runtime which dependencies should be deduplicated across host and remotes.

const sharedDeps = {
  react: {
    singleton: true,
    requiredVersion: '^18.2.0',
    strictVersion: false,
  },
  'react-dom': {
    singleton: true,
    requiredVersion: '^18.2.0',
  },
  '@company/design-system': {
    singleton: true,
    requiredVersion: '^4.0.0',
    eager: false,
  },
};

• singleton: true — one physical instance; critical for React, routers, design-system contexts
• requiredVersion — semver range-check at runtime
• eager: true — bundles shared dep into entry; faster first paint but larger entry
• import: false — consumer must provide the dep (host-owned)
• strictVersion: true — fail on mismatch instead of warn

Host loads react@18.2 → registers in share scope
Remote requests react singleton → runtime negotiates version → one instance shared

Without singleton, each remote may bundle its own copy — “Invalid hook call” and silent context loss.

Interview: If you mention federation but not singleton React, interviewers assume you have not operated it in production.

Runtime Version Negotiation

Definition

At runtime the federation runtime builds a share scope map. Each container registers shared modules with version metadata.

For singleton deps, it picks one version — typically the highest compatible semver satisfying requiredVersion, or the first loaded depending on config.

// Host: react ^18.2.0, Remote built with 18.3.1 — OK
// Host: react ^18.2.0, Remote bundles react 17 internally — hooks crash
 
window.__FEDERATION_HEALTH__ = {
  reactVersion: React.version,
};

Version negotiation is runtime — separate CI jobs can ship a broken combo. Teams align via shared lockfile, platform bot bumps, and canary host loading all remotes before prod promote.

Guess the failure: Host + Remote B where Remote B bundles react 17 without shared config → duplicate reconcilers on one page.

Interview: CI green does not mean runtime safe — need integrated federation smoke tests.

Federation vs npm Packages / Monorepo

Definition

// Monorepo — compile-time import
// import { Checkout } from '@company/checkout';
 
// Federation — runtime, independent deploy
// const Checkout = React.lazy(() => import('checkout/CheckoutApp'));

Use npm packages or monorepo source when teams release on the same train.

Use Federation for independent deploy cadence, different tech stacks on one shell, or runtime plugin loading.

Start with monorepo packages until deploy independence is a real org requirement. Document ADR with rollback path to packaged imports.

single-spa orchestrates micro-app lifecycle — different layer from module loading. Next.js App Router complicates RSC boundaries with federation.

Interview: Frame as organizational boundary decision — tech follows org chart.

Failure Modes & Operations

Definition

Common failures:

• remoteEntry CDN outage — host route blank
• Version skew — hooks crash
• CORS misconfig on remote assets
• Stale cache — old remoteEntry pointing at deleted chunks
• Shared scope race when remotes load in wrong order
• Security — compromised remote URL is XSS

'use client';
 
import { lazy, Suspense, Component, type ReactNode } from 'react';
 
const RemoteCheckout = lazy(() => import('checkout/CheckoutApp'));
 
class RemoteErrorBoundary extends Component<
  { children: ReactNode; fallback: ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    if (this.state.hasError) return this.props.fallback;
    return this.props.children;
  }
}
 
export function FederatedCheckout() {
  return (
    <RemoteErrorBoundary fallback={<div>Checkout unavailable</div>}>
      <Suspense fallback={<div>Loading checkout…</div>}>
        <RemoteCheckout />
      </Suspense>
    </RemoteErrorBoundary>
  );
}

Ops practices: health checks per remote URL, feature flags to disable remote routes, compatible version matrix, RUM tagged by remoteName, per-remote rollback.

remoteEntry needs short TTL or no-cache; chunks immutable with content hash. Deploy remotes before host when adding exposes.

Interview: Same cache policy for entry and chunks is wrong — entry short TTL, chunks immutable hash.

Senior Interview Summary

Runtime model

Host fetches remoteEntry at runtime — remote code not in host build.

Shared config

singleton: true for React, router, design system. requiredVersion for semver negotiation.

vs monorepo

Independent deploy + runtime composition vs compile-time import simplicity.

Failure modes

CDN outage, version skew, stale entry, CORS/CSP. Error Boundary + Suspense required.

Operations

Contract tests for exposed modules · health checks · degraded-mode UX · per-remote rollback.

Best mental model

Federation = distributed system at the UI layer
exposes     = semver API contract
shared      = singleton negotiation at runtime

Practical rules

Never skip singleton React        → hooks and context break
Never federate internal utilities → stable versioned surface only
Never trust dynamic remote URL    → allowlist origins
Test integrated                   → host + all remotes in one environment

What to say in interviews

Explain host/remote/exposes/remotes, why singleton React matters, when federation beats packages, and name three production failure modes with mitigations.