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

Rspress Plugin

Note

Requires Rspress version 2.0.0-beta.16 or higher.

Helps users build and consume Module Federation products in Rspress.

Quick Start

Installation

You can install the plugin with the following command:

npm
yarn
pnpm
bun
npm add @module-federation/rspress-plugin

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/rspress-plugin';

export default createModuleFederationConfig({
  filename: 'remoteEntry.js',
  name: 'mf_doc',
  exposes: {
    './intro-en': './docs/en/guide/intro.mdx',
    './intro-zh': './docs/zh/guide/intro.mdx',
  },
});

Register Plugin

rspress.config.ts
import { defineConfig } from 'rspress/config';
import { pluginModuleFederation } from '@module-federation/rspress-plugin';
import mfConfig from './module-federation.config';

export default defineConfig({
  // ...
  plugins: [pluginModuleFederation(mfConfig)],
  builderConfig: {
    output: {
      assetPrefix: 'https://module-federation.io/',
    },
  },
});

Loading Document Fragments

You can directly load exported document fragments in your mdx files.

docs/en/guide/intro.mdx
import Intro from 'mf-doc/intro-zh';

{/* Document fragments support passing parameters, which are consumed as props. */}
<Intro cmdTools={['a','b']} />

Document fragments support passing parameters, which are consumed as props.

If you need to use the cmdTools variable in a document fragment, you can refer to the following:

docs/zh/guide/intro.mdx
{(props.cmdTools || ['pkg-a', 'pkg-b']).map(cmdTool=>(<p><code>{cmdTool}</code></p>))}

Configuration

  • Type:
export declare const pluginModuleFederation: (
  moduleFederationOptions: ModuleFederationOptions,
  rspressOptions?: RspressPluginOptions,
) => RspressPlugin;

type RspressPluginOptions = {
  autoShared?: boolean;
  rebuildSearchIndex?: boolean;
};

moduleFederationOptions

Module Federation Configuration

rspressOptions

Additional configuration for the Rspress plugin.

autoShared

  • Type: boolean
  • Default: true

Rspress uses react, react-dom, and @mdx-js/react as third-party dependencies. These three dependencies need to be singletons, so the shared configuration is automatically injected during the build.

You can also set autoShared: false to disable this behavior.

rebuildSearchIndex

  • Type: boolean
  • Default: true

Rspress automatically generates a search index during the build, but the generation process only supports .mdx or .md files. Therefore, when a Module Federation document fragment is loaded, it will not be searchable.

To avoid this, the MF Rspress Plugin will regenerate the search index based on the rendered html after SSG is complete to support the search function.

If you are using remoteSearch or other search functions, you can set rebuildSearchIndex: false to disable this behavior.

Note: This feature is only effective in ssg mode.

FAQ

Does it support local search?

Only ssg mode is supported. For details, refer to rebuildSearchIndex.

Could not parse expression with swc: Expression expected"

When referencing an MDX component, you may encounter the following error:

File: "/root/docs/zh/guide/basic/mf.mdx"
Error: "23:8: Could not parse expression with swc: Expression expected"

This is an issue where Rspress fails to parse the expression correctly when parsing the MDX component. It can be resolved as follows:

import RemoteIntroDoc from 'mf-doc/intro';
import Head from '@components/Head';
+ import React from 'react';

- <RemoteIntroDoc head={<Head />} />
+ <RemoteIntroDoc head={React.createElement(Head)}/>