┌─────────────────────────────────────────────────────┐
│  App Shell (Host)                                   │
│  ├── Loads at startup                               │
│  ├── Owns: Navigation, Auth bootstrap, Routing     │
│  └── Dynamically imports from remotes at runtime   │
└─────────┬───────────────────────────────────────────┘
          │ import('checkout/Cart')     │ import('catalog/ProductGrid')
          ▼                            ▼
┌─────────────────┐         ┌─────────────────────┐
│  Checkout Remote │         │  Catalog Remote      │
│  Deployed: CDN A │         │  Deployed: CDN B     │
│  Exposes:        │         │  Exposes:            │
│    ./Cart        │         │    ./ProductGrid     │
│    ./OrderSummary│         │    ./SearchBar       │
└─────────────────┘         └─────────────────────┘

// checkout/rspack.config.js
const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack')

module.exports = {
  entry: './src/index.ts',
  output: {
    // Must be unique across all remotes — used by the federation runtime
    // for the shared scope namespace
    uniqueName: 'checkout',
    publicPath: 'auto',  // federation runtime resolves the URL dynamically
  },
  plugins: [
    new ModuleFederationPlugin({
      // The unique name of this remote — referenced by the host
      name: 'checkout',

      // Modules this remote makes available to hosts
      exposes: {
        './Cart':         './src/components/Cart',
        './OrderSummary': './src/components/OrderSummary',
        './useCheckout':  './src/hooks/useCheckout',
      },

      // Shared dependencies — negotiated at runtime with the host
      shared: {
        react: {
          singleton: true,       // Only one React instance allowed in the shared scope
          requiredVersion: '^18.0.0',  // Accept any React 18.x from the host
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.0.0',
        },
        'react-router-dom': {
          singleton: true,
          requiredVersion: '^6.0.0',
        },
      },
    }),
  ],
}

// shell/rspack.config.js
const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack')

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',

      // Remote declarations — where to find each remote at runtime
      remotes: {
        checkout: 'checkout@https://cdn.example.com/checkout/remoteEntry.js',
        catalog:  'catalog@https://cdn.catalog.example.com/remoteEntry.js',
      },

      shared: {
        react:        { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom':  { singleton: true, requiredVersion: '^18.0.0' },
        'react-router-dom': { singleton: true, requiredVersion: '^6.0.0' },
      },
    }),
  ],
}

shared: {
  // Strategy 1: Loose sharing — use the highest version found, but allow fallback
  // Use when: library is stateless (lodash, date-fns, zod)
  'date-fns': {
    requiredVersion: '^3.0.0',  // "I need at least 3.0.0"
    // No singleton — multiple versions can coexist harmlessly
  },

  // Strategy 2: Singleton — only one instance, version negotiated at runtime
  // Use when: library has module-level state (React, React Router, Zustand)
  react: {
    singleton: true,
    requiredVersion: '^18.0.0',
    // If host has 18.2.0 and remote requires ^18.0.0 → reuse 18.2.0
    // If host has 17.0.0 and remote requires ^18.0.0 → warning, loads 18.x from remote
  },

  // Strategy 3: Strict singleton — version mismatch is a hard error, not a warning
  // Use when: version mismatch would cause runtime incompatibility (React 17 vs 18 hooks API)
  react: {
    singleton: true,
    strictVersion: true,        // version mismatch → throws at runtime, not warning
    requiredVersion: '~18.2.0', // "I require exactly 18.2.x, patch versions only"
  },
}

shared: {
  // ✅ SHARE: Libraries with module-level state (singletons)
  react:            { singleton: true },
  'react-dom':      { singleton: true },
  'react-router-dom': { singleton: true },
  zustand:          { singleton: true },

  // ✅ SHARE: Large, stable libraries that don't change per remote
  // (saves bandwidth — only loaded once across all remotes)
  'date-fns':       { requiredVersion: '^3.0.0' },

  // ❌ DO NOT SHARE: Domain-specific libraries owned by one remote
  // These belong in the remote's local bundle
  // '@stripe/react-stripe-js': — only Checkout uses this
  // 'react-dnd': — only Catalog uses this
  // '@sentry/react': — each remote should have its own Sentry config
}

// webpack.config.js (before)
const { ModuleFederationPlugin } = require('webpack').container

// rspack.config.js (after) — same config, different import
const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack')
// ↑ The rest of the config is identical

// vite.config.ts — NOT recommended for production MFE systems in 2026
import federation from '@module-federation/vite'

export default {
  plugins: [
    federation({
      name: 'checkout',
      exposes: { './Cart': './src/Cart' },
      shared: { react: { singleton: true } },
    })
  ]
}

// design-system remote
exposes: {
  './Button': './src/Button',
  './Modal':  './src/Modal',
  './Table':  './src/Table',
}

// Each consuming remote
remotes: {
  'design-system': 'ds@https://cdn.example.com/design-system/remoteEntry.js'
}

// Usage in checkout remote
import Button from 'design-system/Button'

# Each remote independently installs a version
cd checkout && npm install @example/design-system@2.1.0
cd catalog  && npm install @example/design-system@2.0.0  # can be on older version