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'],
    }),
  ],
});

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,
            },
          },
        }),
      ],
    },
  ],
});

Note

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

Configuration

  • Type:
export declare const pluginModuleFederation: (moduleFederationOptions: ModuleFederationOptions, rsbuildOptions?: RSBUILD_PLUGIN_OPTIONS) => RsbuildPlugin;

type RSBUILD_PLUGIN_OPTIONS = {
  ssr?: boolean;
}

moduleFederationOptions

Module Federation Configuration

rsbuildOptions

Additional configuration for the Rsbuild plugin.

ssr

TIP

Only supports Rslib global plugins.

  • Type: boolean

  • Default: false

Enables the generation of SSR artifacts.

Example:

First, create an Rslib project using npm create module-federation@next:

# Here, three parameters (template, role, name) are passed. You can also run npm create module-federation@latest directly and follow the prompts.
npm create module-federation@next -- --template provider-rslib --role provider --name rslib_ssr_provider

Then, modify the rslib.config.ts configuration to add ssr:true:

rslib.config.ts
- plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig)],
+ plugins: [pluginReact(), pluginModuleFederation(moduleFederationConfig, { ssr: true })],

Install dependencies and start the project:

pnpm install
pnpm run mf-dev

This will generate a dist/mf/ssr directory containing the SSR artifacts.

Then, refer to the Create a Modern.js Consumer section to create a consumer, reference the Rslib SSR provider, and then start project development.