How do you implement Micro-frontends in React with Webpack Module Federation?

Short answer

Module Federation lets a host React app load independently built and hosted components and interfaces (Remotes) at runtime, while sharing common libraries such as React.

Explanation

This architecture lets teams deploy parts of a large enterprise application without rebuilding the entire main app. Module Federation's shared setting prevents React or ReactDOM from loading twice in memory and specifies Semantic Versioning compatibility requirements between applications.

Code example

// Configure Module Federation in webpack.config.js
new ModuleFederationPlugin({
  name: 'host_app',
  remotes: {
    checkout: 'checkoutApp@https://cdn.example.com/remoteEntry.js',
  },
  shared: {
    react: { singleton: true, requiredVersion: '^18.0.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
  },
});

Common mistakes

• Not configuring react as a singleton, loading two React copies in the browser and breaking all Hooks.

Follow-up questions

• What are Error Boundaries, and how do they handle unexpected errors in a component tree?

Sources

• Module Federation docs — Getting started