logologo
Guide
Practice
Configuration
Plugins
Showcase
Blog
Ecosystem
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
Guide
Practice
Configuration
Plugins
Showcase
Blog
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
logologo

Getting Started

Introduction
Setting Up the Environment
Quick Start Guide
Feature Navigation
Glossary of Terms
npm Packages

basic

Runtime

Runtime Access
Runtime API
Runtime Hooks

Build Plugins

Overview
Rsbuild
Rspack
Webpack
Rspress
Vite
Metro
Type Hinting
Command Line Tool
Style Isolation

Data Solution

Data Fetching
Data Caching
Prefetch

Frameworks

Modern.js
Next.js

Deployment

Deploy with Zephyr Cloud

Debug

Enable debug mode
Chrome Devtool
Global variables

Troubleshooting

Overview

Runtime

RUNTIME-001
RUNTIME-002
RUNTIME-003
RUNTIME-004
RUNTIME-005
RUNTIME-006
RUNTIME-007
RUNTIME-008
RUNTIME-009

Build

BUILD-001
BUILD-002

Type

Overview
TYPE-001
Other
Edit this page on GitHub
Previous PageOverview
Next PageRspack

#Rsbuild

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.

#target

TIP

Only supported when used as a global plugin in Rslib.

  • Type: 'web' | 'node' | 'dual'
  • Default: 'web'

Used to specify the target runtime environment for the output. When set to dual, it builds both Web (browser) output and Node.js (SSR) output.

After generating SSR output with target: 'dual', you can refer to Create a Modern.js Consumer, create a consumer, and integrate the corresponding Rslib SSR producer for development.

#ssr

Deprecated Warning

This option is deprecated. Please use target: 'dual' to enable SSR.

  • Type: boolean
  • Default: false

When enabled, it generates SSR output.