Vite

Can build modules that meet the Module Federation loading specifications.
Can consume modules that adhere to the Module Federation specifications using aliases.
Can configure shared dependencies for modules, so that when the host environment of the loaded module already has the corresponding dependency, it will not be loaded again.
When a module has remote types, it automatically downloads and consumes the remote types.

Unsupported Options

Except for the dev option, all options are supported.

roadmap 🗓️
- Consuming remote modules will have hot update capabilities.
- nuxt ssr

Quick Start

Installation

You can install the plugin with the following commands:

npm

yarn

pnpm

bun

npm add @module-federation/vite --save

Create module-federation.config.ts

Create the module-federation.config.ts file with the following content:

module-federation.config.ts

import { createModuleFederationConfig } from '@module-federation/vite';

export default createModuleFederationConfig({
  name: 'vite_provider',
  manifest: true,
  remotes: {
    esm_remote: {
      type: 'module',
      name: 'esm_remote',
      entry: 'https://[...]/remoteEntry.js',
    },
    var_remote: 'var_remote@https://[...]/remoteEntry.js',
  },
  exposes: {
    './button': './src/components/button',
  },
  shared: {
    react: {
      singleton: true,
    },
    'react/': {
      singleton: true,
    },
  },
});

Register the Plugin

In Vite, you can add the plugin through the plugins configuration item in the vite.config.js file:

vite.config.js

import { federation } from '@module-federation/vite';
import mfConfig from './module-federation.config';

module.exports = {
  server: {
    origin: 'http://localhost:2000',
    port: 2000,
  },
  base: 'http://localhost:2000',
  plugins: [federation(mfConfig)],
  // Do you need to support build targets lower than chrome89?
  // You can use 'vite-plugin-top-level-await' plugin for that.
  build: {
    target: 'chrome89',
  },
};

Configure the Build Plugin

Type: ModuleFederationPlugin(options: ModuleFederationOptions)
The configuration structure for the Module Federation plugin is as follows:

type ModuleFederationOptions = {
  name: string;
  filename?: string;
  remotes?: Array<RemoteInfo>;
  shared?: ShareInfos;
};

You can find detailed explanations of all configuration items on the Configuration Overview page.

#Vite

#Quick Start

#Installation

#Create module-federation.config.ts

#Register the Plugin