Micro-Frontends Architecture & Module Federation

// Host webpack.config.js (Shell Application)
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell_app',
      remotes: {
        checkout: 'checkout_app@https://cdn.example.com/checkout/remoteEntry.js',
        dashboard: 'dashboard_app@https://cdn.example.com/dashboard/remoteEntry.js',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.2.0', eager: false },
        'react-dom': { singleton: true, requiredVersion: '^18.2.0', eager: false },
        '@myorg/design-system': { singleton: true },
      },
    }),
  ],
};

// React Shell Dynamic Loading with Error Boundary
import React, { Suspense, lazy } from 'react';
import { RemoteErrorBoundary } from './RemoteErrorBoundary';

const RemoteCheckout = lazy(() => import('checkout/CheckoutModule'));

export function CheckoutPage() {
  return (
    <RemoteErrorBoundary fallback={<p>Checkout service is temporarily unavailable.</p>}>
      <Suspense fallback={<div>Loading Checkout Experience...</div>}>
        <RemoteCheckout />
      </Suspense>
    </RemoteErrorBoundary>
  );
}