Guide
Practice
Configuration
Plugins
Showcase
Blog
Guide
Practice
Configuration
Plugins
Showcase
Blog

Rsbuild Plugin

Help users quickly build Module Federation products in Rsbuild App or Rslib

Quick Start

Installation

You can install the plugin using the following command:

npm
yarn
pnpm
bun
npm add @module-federation/rsbuild-plugin --save-dev

Register plugin

Rsbuild App

rsbuild.config.ts
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  server: {
    port: 2000,
  },
  plugins: [
    pluginReact(),
    pluginModuleFederation({
      name: 'federation_consumer',
      remotes: {
        remote1: 'remote1@http://localhost:2001/mf-manifest.json',
      },
      shared: ['react', 'react-dom'],
      // Optional: Force Module Federation to be applied to all formats
      // forceMfOnAllFormats: true,
    }),
  ],
});

Rslib Module

rslib.config.ts
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { defineConfig } from '@rslib/core';

export default defineConfig({
  lib: [
    // ...
    {
      format: 'mf',
      output: {
        distPath: {
          root: './dist/mf',
        },
        assetPrefix: 'xxx',
      },
      plugins: [
        // ...
        pluginModuleFederation({
          name: 'rslib_provider',
          exposes: {
            '.': './src/index.tsx',
          },
          shared: {
            react: {
              singleton: true,
            },
            'react-dom': {
              singleton: true,
            },
          },
        }),
      ],
    },
  ],
});

Configuration Options

The pluginModuleFederation accepts all standard Module Federation plugin options, plus these additional options:

Option Type Default Description
forceMfOnAllFormats boolean false When set to true, Module Federation will be applied to all formats, overriding the internal format check. This allows applying Module Federation even to library formats like UMD or CommonJS.

Note

If you need to use the Module Federation runtime capabilities, please install @module-federation/enhanced