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=>(<code>{cmdTool}</code>))}

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.

Default shared configuration: as follows:

  react: {
    singleton: true,
    requiredVersion: false,
  },
  'react-dom': {
    singleton: true,
    requiredVersion: false,
  },
  'react/': {
    singleton: true,
    requiredVersion: false,
  },
  'react-dom/': {
    singleton: true,
    requiredVersion: false,
  },
  '@mdx-js/react': {
    singleton: true,
    requiredVersion: false
  },
  '@rspress/runtime': {
    singleton: true,
    requiredVersion: false
  }

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)}/>

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=>(<code>{cmdTool}</code>))}

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

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

Default shared configuration: as follows:

  react: {
    singleton: true,
    requiredVersion: false,
  },
  'react-dom': {
    singleton: true,
    requiredVersion: false,
  },
  'react/': {
    singleton: true,
    requiredVersion: false,
  },
  'react-dom/': {
    singleton: true,
    requiredVersion: false,
  },
  '@mdx-js/react': {
    singleton: true,
    requiredVersion: false
  },
  '@rspress/runtime': {
    singleton: true,
    requiredVersion: false
  }

rebuildSearchIndex

Type: boolean
Default: true

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)}/>

#Rspress Plugin

#Quick Start

#Installation

#Create module-federation.config.ts

#Register Plugin

#Loading Document Fragments

#Configuration

#moduleFederationOptions

#rspressOptions

#autoShared

#rebuildSearchIndex

#FAQ

#Does it support local search?

#Could not parse expression with swc: Expression expected"

#Rspress Plugin

#Quick Start

#Installation

#Create module-federation.config.ts

#Register Plugin

#Loading Document Fragments

#Configuration

#moduleFederationOptions

#rspressOptions

#autoShared

#rebuildSearchIndex

#FAQ

#Does it support local search?

#Could not parse expression with swc: Expression expected"

Rspress Plugin

Quick Start

Installation

Create module-federation.config.ts

Register Plugin

Loading Document Fragments

Configuration

moduleFederationOptions

rspressOptions

autoShared

rebuildSearchIndex

FAQ

Does it support local search?

Could not parse expression with swc: Expression expected"

Rspress Plugin

Quick Start

Installation

Create module-federation.config.ts

Register Plugin

Loading Document Fragments

Configuration

moduleFederationOptions

rspressOptions

autoShared

rebuildSearchIndex

FAQ

Does it support local search?

Could not parse expression with swc: Expression expected"