Vite Plugin Federation

0.0.4 verified Mon Apr 27 auth: no javascript

A Vite plugin that enables Module Federation across Vite-based projects, allowing micro-frontends to share components, stores, and utilities at runtime. Current stable version is 0.0.4 (pre-release). Release cadence is rapid but untracked; the plugin is in early development. Key differentiators: native integration with Vite's dev server and build pipeline, support for Vite 5, 6, 7, and 8, and TypeScript-first design. Unlike Webpack Federation, this plugin leverages Vite's ESM-based module system for faster HMR and lighter builds. Requires Node >= 20.19.0 and Vite ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 as peer dependencies. Currently in pre-release; API may change without notice.

Common errors

error Cannot find module 'vite-plugin-federation' or its corresponding type declarations. ↓

cause Package not installed or TypeScript not configured to resolve it.

fix

npm install vite-plugin-federation --save-dev && ensure tsconfig includes 'moduleResolution': 'bundler' or 'node16'.

error Cannot import the named export 'federation' from non EcmaScript module (only default export is available) ↓

cause Trying to use named import 'federation' but the package version might be CJS or the import style is wrong.

fix

Use import { federation } from 'vite-plugin-federation' (ESM). If using require, use const { federation } = require('vite-plugin-federation').

error Uncaught TypeError: Failed to fetch dynamically imported module: /assets/remoteEntry.js ↓

cause Remote entry URL is incorrect or CORS not configured.

fix

Verify the remote URL and ensure CORS headers are set on the remote server.

Warnings

breaking The plugin is in pre-release (v0.0.x). Breaking changes may occur with minor version bumps. ↓

fix Lock version to current minor and test upgrades carefully. Monitor GitHub releases.

deprecated API may change without prior notice; no stability guarantees. ↓

fix Expect and adapt to changes. Follow the repository for updates.

gotcha Requires Vite 5, 6, 7, or 8 as peer dependency. Using with Vite 4 will cause install errors. ↓

fix Ensure your project uses Vite ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0.

gotcha Node.js >=20.19.0 required. Older Node versions may not work. ↓

fix Update Node.js to 20.19.0 or higher.

Install

npm install vite-plugin-federation

yarn add vite-plugin-federation

pnpm add vite-plugin-federation

Imports

federation

wrong

import federation from 'vite-plugin-federation'

correct

import { federation } from 'vite-plugin-federation'

The export is named, not default. Common mistake: using default import.

VitePluginFederationOptions

wrong

import { VitePluginFederationOptions } from 'vite-plugin-federation'

correct

import type { VitePluginFederationOptions } from 'vite-plugin-federation'

Type only import avoids bundling. Use with TypeScript.

ExposeOptions
```
import type { ExposeOptions } from 'vite-plugin-federation'
```
Available via type export for configuring expose property.

Quickstart

Shows basic setup with Vite config using federation plugin, defining a remote and sharing React as singleton.

// vite.config.ts
import { defineConfig } from 'vite';
import { federation } from 'vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'my-host',
      remotes: {
        remote_app: 'http://localhost:3001/assets/remoteEntry.js',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
});

// In a component:
import('remote_app/Button').then(({ Button }) => {
  // use Button
});