new ModuleFederationPlugin({
  name: 'checkout',
  exposes: { './Cart': './src/Cart' },
  shared: { react: { singleton: true, requiredVersion: '^18.0.0' } },
})

// math.js — exporting
module.exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
}

// index.js — importing
const { add } = require('./math')  // synchronous: pauses execution until resolved
console.log(add(2, 3))             // 5

// ❌ This is valid CommonJS — but completely opaque to a bundler
const moduleName = condition ? './feature-a' : './feature-b'
const module = require(moduleName)  // bundler cannot know which file to include at build time

// math.js — named exports
export function add(a, b) { return a + b }
export function subtract(a, b) { return a - b }

// index.js — named imports (static, must be at top level)
import { add } from './math.js'
console.log(add(2, 3))  // 5

1. Entry point        →  Find src/index.tsx (your application root)
2. Dependency graph   →  Follow every import statement recursively
3. Transform          →  TypeScript → JS, JSX → JS, CSS → JS
4. Emit chunks        →  Write optimized output files to dist/

dist/
├── main.js           ← entry chunk (app bootstrap code)
├── vendor.js         ← node_modules code (React, Router, etc.)
├── checkout.js       ← code for the /checkout route (lazy-loaded)
└── catalog.js        ← code for the /catalog route (lazy-loaded)

// Static import — resolved at BUILD TIME
// The bundler sees this, includes Modal.tsx in the output bundle
// No network request at runtime — the code is already in the bundle
import { Modal } from './Modal'

// Dynamic import — resolved at RUNTIME
// The bundler emits Modal as a SEPARATE chunk file
// At runtime, this line makes a NETWORK REQUEST to fetch that chunk
const { Modal } = await import('./Modal')

// This is what React.lazy does under the hood
const CheckoutPage = React.lazy(() => import('./CheckoutPage'))
// When <CheckoutPage /> is first rendered:
// 1. Browser makes GET /dist/checkout.js
// 2. JS engine evaluates the chunk
// 3. React renders the component

import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'

// Each lazy() call creates a separate chunk in the build output
const CheckoutPage = lazy(() => import('./pages/CheckoutPage'))
const CatalogPage  = lazy(() => import('./pages/CatalogPage'))
const ProfilePage  = lazy(() => import('./pages/ProfilePage'))

export function App() {
  return (
    <Suspense fallback={<PageSpinner />}>
      <Routes>
        <Route path="/checkout" element={<CheckoutPage />} />
        <Route path="/catalog"  element={<CatalogPage />} />
        <Route path="/profile"  element={<ProfilePage />} />
      </Routes>
    </Suspense>
  )
}

dist/
├── main.js          ← App shell, Router setup, PageSpinner
├── CheckoutPage.js  ← only loaded when user visits /checkout
├── CatalogPage.js   ← only loaded when user visits /catalog
└── ProfilePage.js   ← only loaded when user visits /profile

host-app/dist/
├── main.js    ← includes React 18.2.0 (~45KB gzipped)
└── vendor.js  ← includes React 18.2.0

checkout-remote/dist/
├── checkout.js ← includes React 18.2.0 (~45KB gzipped)
└── vendor.js   ← includes React 18.2.0

// Simplified React internals — module-level state
let currentlyRenderingFiber = null

export function useState(initialState) {
  // Reads from currentlyRenderingFiber in THIS React instance
  return [currentlyRenderingFiber.memoizedState, dispatcher]
}

// In host app — using HOST React instance
const AuthContext = React.createContext<User | null>(null)

// In checkout remote — using REMOTE React instance
function CartButton() {
  // ❌ useContext reads from REMOTE React's registry
  // AuthContext was created in HOST React's registry
  // result is always null — no error thrown, just wrong value
  const user = useContext(AuthContext)
  return <button>{user?.name ?? 'Sign In'}</button>
}

console.log(import.meta.url)
// "https://example.com/dist/checkout.js"

console.log(import.meta.env)
// { MODE: 'production', BASE_URL: '/', ... }  (injected by Vite/webpack)

// Simplified view of what webpack's federation runtime adds to each chunk
// (this code is generated — you do not write it)
__webpack_share_scopes__.default = {
  react: {
    '18.2.0': {
      get: () => () => require('react'),
      loaded: true,
      eager: false,
    }
  }
}

// Before rendering any federated component, the runtime negotiates:
// "Does the host already have react@18.2.0 loaded? If yes, reuse it."
// "If not, load my own copy — but mark it in the shared scope."