remotes: {
  checkout: 'checkout@https://cdn.example.com/checkout/remoteEntry.js',
}

Timeline:
  T+0   Checkout deploys v1.2.3 → URL: cdn.example.com/checkout/1.2.3/remoteEntry.js
  T+0   Host config has: checkout@cdn.example.com/checkout/1.2.3/remoteEntry.js  ✅
  T+30m Checkout deploys v1.2.4 (bug fix)
  T+30m Host config STILL has: .../1.2.3/remoteEntry.js  ❌ — stale, manual update required
  T+30m Checkout realizes v1.2.4 introduced a regression, needs rollback
  T+30m Only option: rebuild host AND remote — 15 min downtime

Host config → manifest URL (stable, never changes)
                    ↓
             manifest.json (changes with every remote deploy)
                    ↓
             actual chunk URL (versioned, immutable)

// shell/rspack.config.js — host uses a stable manifest URL, not a chunk URL
remotes: {
  checkout: {
    type: 'module',
    name: 'checkout',
    // This URL never changes — it always points to the latest manifest
    entry: 'https://cdn.example.com/checkout/mf-manifest.json',
  },
}

// https://cdn.example.com/checkout/mf-manifest.json
// Updated by Checkout CI on every deploy — 30-second CDN file update
{
  "id": "checkout",
  "name": "checkout",
  "version": "1.2.5",
  "remoteEntry": {
    "name": "remoteEntry",
    "path": "./",
    "type": "module"
  },
  "shared": [
    { "id": "checkout:react", "name": "react", "version": "18.2.0" }
  ],
  "exposes": [
    { "id": "checkout:./Cart", "name": "./Cart", "path": "./Cart" }
  ]
}

// ✅ In a monolith — full type information available
import { Cart, CartProps } from './checkout/Cart'
// TypeScript knows CartProps, autocomplete works, refactoring is safe

// ❌ In MFEs without type sharing — types are unknown
const { Cart } = await import('checkout/Cart')
// TypeScript infers: { Cart: any }
// No autocomplete, no prop validation, no compile-time safety

// checkout/rspack.config.js — remote side
const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack')
const { DtsPlugin } = require('@module-federation/dts-plugin')

module.exports = {
  plugins: [
    new ModuleFederationPlugin({ name: 'checkout', /* ... */ }),
    new DtsPlugin({
      generateTypes: {
        // Generates .d.ts files for all exposed modules
        // Uploads them to a CDN path alongside the remoteEntry
        generateAPITypes: true,
        extractThirdParty: true,
      },
    }),
  ],
}

// shell/rspack.config.js — host side
const { DtsPlugin } = require('@module-federation/dts-plugin')

module.exports = {
  plugins: [
    new ModuleFederationPlugin({ /* ... */ }),
    new DtsPlugin({
      consumeTypes: {
        // Downloads .d.ts files from each remote during host build
        remoteTypesFolder: './@mf-types',
      },
    }),
  ],
}

// Now type-safe — .d.ts downloaded from checkout remote's CDN
import Cart from 'checkout/Cart'
// TypeScript knows: Cart: React.FC<{ cartCount: number; onCheckout: () => void }>
// If Checkout renames cartCount → itemCount without updating host: build error ✅

# Add to shell CI pipeline — runs after consumeTypes downloads remote .d.ts files
npx tsc --noEmit
# If any remote changed its exposed API incompatibly: compile error → CI blocked

// shell/src/federation-plugins.ts
import { createRuntimePlugin } from '@module-federation/runtime'

export const CircuitBreakerPlugin = createRuntimePlugin(() => ({
  name: 'circuit-breaker',

  // Fires before the federation runtime fetches a remote module
  beforeRequest(args) {
    const { id, options } = args
    const remote = id.split('/')[0]  // e.g., 'checkout' from 'checkout/Cart'

    if (circuitBreaker.isOpen(remote)) {
      // Return null to signal the consumer to use the fallback
      console.warn(`[CircuitBreaker] ${remote} is unavailable — using fallback`)
      return null
    }
    return args
  },

  // Fires after the remote module resolves — successful or not
  afterResolve(args) {
    const { id, error } = args
    const remote = id.split('/')[0]

    if (error) {
      circuitBreaker.recordFailure(remote)
    } else {
      circuitBreaker.recordSuccess(remote)
    }
    return args
  },
}))

// shell/rspack.config.js — register the plugin in the federation config
new ModuleFederationPlugin({
  name: 'shell',
  remotes: { /* ... */ },
  runtimePlugins: ['./src/federation-plugins.ts'],
})

export const TelemetryPlugin = createRuntimePlugin(() => ({
  name: 'telemetry',

  beforeRequest(args) {
    const startTime = performance.now()
    // Store on args for afterResolve to access
    args._startTime = startTime
    return args
  },

  afterResolve(args) {
    const duration = performance.now() - args._startTime
    const remote = args.id.split('/')[0]
    const version = getRemoteVersion(remote)  // read from manifest

    // Report to your observability platform
    analytics.track('remote_load', {
      remote,
      version,
      duration_ms: Math.round(duration),
      success: !args.error,
    })
    return args
  },
}))

export const ABRoutingPlugin = createRuntimePlugin(() => ({
  name: 'ab-routing',

  beforeRequest(args) {
    // Route 10% of users to checkout-v2 remote
    if (args.id.startsWith('checkout/') && getABGroup() === 'treatment') {
      return {
        ...args,
        // Override the manifest URL for this request
        options: {
          ...args.options,
          entry: 'https://cdn.example.com/checkout-v2/mf-manifest.json',
        },
      }
    }
    return args
  },
}))

// checkout/src/routes.ts — Checkout remote owns its own routes
export const checkoutRoutes = [
  { path: '/checkout',            component: lazy(() => import('./CheckoutPage')) },
  { path: '/checkout/cart',       component: lazy(() => import('./CartPage')) },
  { path: '/checkout/gift-cards', component: lazy(() => import('./GiftCardsPage')) },
  { path: '/checkout/confirm',    component: lazy(() => import('./ConfirmPage')) },
]

// Exposed to the host
// checkout/rspack.config.js
exposes: {
  './routes': './src/routes',
}

// shell/src/App.tsx — Shell aggregates routes from all remotes
import { lazy } from 'react'

const checkoutRoutes = lazy(() => import('checkout/routes'))
const catalogRoutes  = lazy(() => import('catalog/routes'))

// Shell only knows the top-level prefix — each remote manages its children
<Routes>
  <Route path="/checkout/*" element={<RemoteRoutes routes={checkoutRoutes} />} />
  <Route path="/catalog/*"  element={<RemoteRoutes routes={catalogRoutes} />} />
</Routes>

<!-- index.html -->
<script type="importmap">
{
  "imports": {
    "react":     "https://cdn.skypack.dev/react@18.2.0",
    "react-dom": "https://cdn.skypack.dev/react-dom@18.2.0",
    "checkout":  "https://cdn.example.com/checkout/checkout.js"
  }
}
</script>