Migrating to Micro-Frontends:
The Intuit Experience

The Problem with Our Monolith

By mid-2024, our QuickBooks frontend was a 4-year-old React monolith with 380+ components, 12 product teams committing to the same repo, and a build time of 22 minutes. A single bad merge could block all 12 teams from deploying. CI became our biggest bottleneck — not our engineers.

Why Webpack 5 Module Federation?

We evaluated three approaches before committing: iframes (too isolated, poor UX), npm packages (too coupled, slow propagation across teams), and Webpack 5 Module Federation — the clear winner. Module Federation lets each MFE expose components that the Shell App loads at runtime, meaning no redeployment of the shell is needed when a child MFE ships a fix.

The Shell + MFE Architecture

// shell/webpack.config.js — Host application
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        billing: 'billing@https://mfe-billing.intuit.com/remoteEntry.js',
        reports: 'reports@https://mfe-reports.intuit.com/remoteEntry.js',
        tax:     'tax@https://mfe-tax.intuit.com/remoteEntry.js',
      },
      shared: {
        react:      { singleton: true, requiredVersion: '^19.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^19.0.0' },
      },
    }),
  ],
};

// billing/webpack.config.js — Remote MFE
new ModuleFederationPlugin({
  name: 'billing',
  filename: 'remoteEntry.js',
  exposes: {
    './BillingDashboard': './src/BillingDashboard',
    './InvoiceList':      './src/InvoiceList',
  },
  shared: { react: { singleton: true } },
});

The Migration Phases

Cross-MFE Communication

// shared/event-bus.ts — Lightweight cross-MFE events
export const eventBus = {
  emit: (event: string, data: unknown) =>
    window.dispatchEvent(
      new CustomEvent(event, { detail: data, bubbles: true })
    ),

  on: (event: string, cb: (data: unknown) => void) => {
    const handler = (e: Event) => cb((e as CustomEvent).detail);
    window.addEventListener(event, handler);
    return () => window.removeEventListener(event, handler);
  },
};

// Usage: Billing MFE notifies Shell of payment success
eventBus.emit('payment:success', { invoiceId: 'INV-001', amount: 1200 });

// Shell listens and updates global nav badge
eventBus.on('payment:success', (data) => updateNavBadge(data));

Pitfalls We Hit (And How We Fixed Them)

• Version skew: Two MFEs shipping different React versions caused subtle rendering bugs. Fixed by enforcing singleton: true with requiredVersion in Module Federation config.
• Bundle duplication: Without shared config, common libraries loaded 3× on the page. Audit shared deps early using webpack-bundle-analyzer.
• Cross-MFE routing: React Router doesn't work out of the box across MFE boundaries. We built a thin routing adapter in the Shell.
• Integration testing: Unit tests per MFE weren't enough. We built a Playwright test harness that spins up all remotes to test cross-MFE flows.
• Auth token sharing: Each MFE needed access to the user's JWT. We used a shared auth context exposed by the Shell via the event bus.

The Numbers After Full Migration

• Build time: 22 minutes → 3 minutes per MFE (86% reduction)
• Deployment frequency: 1×/week → 8×/day for active teams
• Deploy lead time: 5 hours → 40 minutes (85% reduction)
• Incidents from cross-team merge conflicts: 12/month → 0