vite-dynamic-mf

A runtime-only Module Federation implementation for Vite, optimized for ES modules and modern web development.

Features

• ✅ Framework-agnostic - Works with any framework (React, Vue, Angular, Svelte, etc.)
• ✅ Runtime-only federation - No build-time dependencies between modules
• ✅ ES Modules native - Built specifically for modern ES module environments
• ✅ Always-ready containers - No manual initialization required
• ✅ TypeScript first-class - Full TypeScript support with comprehensive type definitions
• ✅ Shared dependencies - Singleton and pattern matching with version management
• ✅ Development friendly - CORS handling and federation middleware for dev servers

Compatibility

• Vite: 5.x, 6.x, 7.x
• Node.js: 18.x or higher
• TypeScript: 5.x or higher

Installation

npm install vite-dynamic-mf

Quick Start

Host Application (Consumer)

// vite.config.ts
import { defineConfig } from 'vite';
import { moduleFederation } from 'vite-dynamic-mf';

export default defineConfig({
  plugins: [
    moduleFederation({
      name: 'host',
      remotes: {
        header: 'https://localhost:5001/remoteEntry.js',
        footer: 'https://cdn.example.com/remoteEntry.js',
      },
      shared: {
        'react/': {
          singleton: true,
          eager: true,
        },
        '@tanstack/react-query': {
          singleton: true,
        },
      },
    }),
  ],
});

Remote Application (Provider)

// vite.config.ts
import { defineConfig } from 'vite';
import { moduleFederation } from 'vite-dynamic-mf';

export default defineConfig({
  plugins: [
    moduleFederation({
      name: 'header',
      filename: 'remoteEntry.js',
      exposes: {
        './Header': './src/components/Header.jsx',
        './Navigation': './src/components/Navigation.jsx',
      },
      shared: {
        'react/': {
          singleton: true,
        },
        '@tanstack/react-query': {
          singleton: true,
        },
      },
    }),
  ],
});

Using Remote Components

// In your host application
import { loadFederatedModule } from 'vite-dynamic-mf/runtime';

// Simple dynamic import - no initialization needed
const Header = await loadFederatedModule('header/Header');

// Or with Svelte component wrapper
import RemoteComponent from 'vite-dynamic-mf/components/RemoteComponent.svelte';

// Usage in Svelte - containers are always ready
<RemoteComponent
  remote="header"
  module="./Header"
  props={{ title: "My App" }}
/>

API

Plugin Configuration

| Option | Type | Description | | ---------- | ------------------------------ | --------------------------------------------------- | | name | string | Required. Unique name for the federation module | | filename | string | Remote entry filename (default: 'remoteEntry.js') | | exposes | Record<string, string> | Modules exposed by remote (remote only) | | remotes | Record<string, string> | Remote modules consumed (host only) | | shared | Record<string, SharedConfig> | Shared dependencies configuration |

Runtime API

• loadFederatedModule(moduleId: string) - Load a federated module
• loadRemoteContainer(config: RemoteConfig) - Load a remote container
• importRemote(remoteName: string, moduleName: string) - Import from loaded remote

License

AGPL-3.0-only