feat(core): first-class Module Federation support

.gitignore

@@ -2,6 +2,7 @@
 *.log*
 *.cpuprofile
 node_modules/
+examples/federation/node_modules/
 
 dist/
 dist-*
@@ -43,4 +44,4 @@ fixtures-test-*/
 tests-dist/
 .vscode-test/
 packages/vscode/*.vsix
-packages/vscode/icon.png
+packages/vscode/icon.png

e2e/dom/fixtures/test/handledError.test.tsx

@@ -8,9 +8,21 @@ test('should handle click error', async () => {
 
   const element = screen.getByText('Rsbuild with React');
 
-  window.addEventListener('error', (event) => {
-    expect(event.message).toBe('click error');
+  await new Promise<void>((resolve) => {
+    window.addEventListener(
+      'error',
+      (event) => {
+        expect(event.message).toBe('click error');
+        event.preventDefault();
+        // Some DOM implementations (e.g. happy-dom) don't reflect preventDefault()
+        // via `defaultPrevented`; this ensures frameworks can treat it as handled.
+        (event as any).returnValue = false;
+        resolve();
+      },
+      { once: true },
+    );
+    element.click();
   });
 
-  element.click();
+  // Ensure the assertion above is reached before the test completes.
 });

examples/federation/.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+dist-*/
+.rstest-*
+.rstest-temp/
+.rstest-mf-node-remote.lock
+.DS_Store
+

examples/federation/README.md

@@ -0,0 +1,32 @@
+# react-webpack-MF
+
+[中文](./README_zh-cn.md)
+
+A complete Webpack Module Federation Case with React.
+
+# project directory
+
+## lib-app
+
+Removed in this simplified example.
+
+## component-app
+
+It exposes UI components to `main-app` via Module Federation.
+
+It is a pure `remote`.
+
+## main-app
+
+The top-level app, which depends on `component-app`.
+
+It is a pure host.
+
+# how to use
+
+- `pnpm install`
+- `pnpm run start`
+
+After running these commands, open your browser at `http://localhost:3002` and open the DevTools network tab to see resource loading details.
+
+[Best practices, rules and more interesting information here](../../playwright-e2e/README.md)

examples/federation/README_zh-cn.md

@@ -0,0 +1,30 @@
+# react-webpack-MF
+
+[English](./README.md)
+
+一个相对完整的应用`Webpack Module Federation`的 React 项目案例
+
+# 目录结构
+
+## lib-app
+
+该示例已简化，不再包含 `lib-app`。
+
+## component-app
+
+组件层 App，通过 Module Federation 暴露组件给 `main-app` 使用。
+
+它是一个纯粹的 `remote`。
+
+## main-app
+
+上层 App，依赖 `component-app` 应用。它也是一个纯粹的 `host`。
+
+# 如何使用
+
+- `pnpm install`
+- `pnpm run start`
+
+执行完上述命令，打开浏览器，输入 `http://localhost:3002` 查看页面结果。
+
+[最佳实践、规则和更多信息请参阅](../../playwright-e2e/README.md)

examples/federation/component-app/App.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Button from './src/Button';
+import Dialog from './src/Dialog';
+import Logo from './src/Logo';
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dialogVisible: false,
+    };
+    this.handleClick = this.handleClick.bind(this);
+    this.handleSwitchVisible = this.handleSwitchVisible.bind(this);
+  }
+  handleClick(ev) {
+    console.log(ev);
+    this.setState({
+      dialogVisible: true,
+    });
+  }
+  handleSwitchVisible(visible) {
+    this.setState({
+      dialogVisible: visible,
+    });
+  }
+  render() {
+    return (
+      <div>
+        <Logo />
+        <br />
+        <Button />
+        <br />
+
+        <button type="button" onClick={this.handleClick}>
+          click to open dialog
+        </button>
+        <Dialog
+          switchVisible={this.handleSwitchVisible}
+          visible={this.state.dialogVisible}
+        />
+      </div>
+    );
+  }
+}

examples/federation/component-app/bootstrap.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('app'));

examples/federation/component-app/index.js

@@ -0,0 +1 @@
+import('./bootstrap.js');

examples/federation/component-app/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "rstest_example_component-app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "rspack build --config rspack.browser.config.js ",
+    "build:node": "rspack build --config rspack.node.config.js",
+    "serve": "serve dist -p 3001",
+    "serve:node": "serve dist-node -p 3001",
+    "start": "concurrently \"npm run build\" \"npm run serve\"",
+    "pretest": "pnpm -C ../node-local-remote build:node",
+    "test": "rstest --reporter=verbose"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@module-federation/enhanced": "0.22.0",
+    "@rstest/core": "workspace:*",
+    "@rsbuild/plugin-react": "^1.4.2",
+    "@rspack/cli": "1.6.8",
+    "@rspack/core": "1.6.8",
+    "concurrently": "8.2.2",
+    "serve": "14.2.3"
+  },
+  "dependencies": {
+    "@module-federation/node": "^2.7.26",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  }
+}

examples/federation/component-app/public/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

examples/federation/component-app/rspack.browser.config.js

@@ -0,0 +1,55 @@
+const { HtmlRspackPlugin } = require('@rspack/core');
+const {
+  ModuleFederationPlugin,
+} = require('@module-federation/enhanced/rspack');
+
+module.exports = {
+  entry: './index.js',
+  mode: 'development',
+  devtool: 'hidden-source-map',
+  output: {
+    publicPath: 'http://localhost:3001/',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.jsx', '.js', '.json', '.wasm'],
+  },
+  experiments: {
+    css: true,
+  },
+  module: {
+    rules: [
+      { test: /\.(jpg|png|gif|jpeg)$/, type: 'asset/resource' },
+      {
+        test: /\.(js|jsx)$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: { syntax: 'ecmascript', jsx: true },
+              transform: { react: { runtime: 'automatic' } },
+            },
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'component_app',
+      filename: 'remoteEntry.js',
+      library: { type: 'var', name: 'component_app' },
+      exposes: {
+        './Button': './src/Button.jsx',
+        './Dialog': './src/Dialog.jsx',
+        './Logo': './src/Logo.jsx',
+        './ToolTip': './src/ToolTip.jsx',
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: '19.2.3' },
+        'react-dom': { singleton: true, requiredVersion: '19.2.3' },
+      },
+    }),
+    new HtmlRspackPlugin({ template: './public/index.html' }),
+  ],
+};

examples/federation/component-app/rspack.node.config.js

@@ -0,0 +1,81 @@
+const {
+  ModuleFederationPlugin,
+} = require('@module-federation/enhanced/rspack');
+const path = require('node:path');
+
+/**
+ * Node-targeted remote build used by Rstest's Module Federation test.
+ * This differs from the browser build (rspack.config.js):
+ * - target: async-node
+ * - includes a Node runtime plugin so remote chunks can be loaded over HTTP
+ * - outputs to dist-node (served on a separate port from the browser remote)
+ */
+module.exports = {
+  entry: './index.js',
+  mode: 'development',
+  devtool: 'hidden-source-map',
+  target: 'async-node',
+  output: {
+    // The Node remote runtime resolves chunk URLs relative to the remoteEntry URL
+    // when publicPath is explicitly set. `auto` can throw in non-browser contexts.
+    publicPath: 'http://localhost:3001/',
+    clean: true,
+    path: path.resolve(__dirname, 'dist-node'),
+  },
+  resolve: {
+    extensions: ['.jsx', '.js', '.json', '.wasm'],
+  },
+  experiments: {
+    css: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jpg|png|gif|jpeg)$/,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.(js|jsx)$/,
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: {
+                syntax: 'ecmascript',
+                jsx: true,
+              },
+              transform: {
+                react: {
+                  runtime: 'automatic',
+                },
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'component_app',
+      filename: 'remoteEntry.js',
+      // This remote is consumed by Rstest using `remoteType: 'script'` while tests
+      // run under JSDOM. We force the MF runtime to use its Node loader (vm eval),
+      // so the remoteEntry must export through CommonJS for the loader to return
+      // the container interface (get/init).
+      library: { type: 'commonjs-module', name: 'component_app' },
+      // Required for async-node remotes that load chunks over HTTP in Node.
+      runtimePlugins: ['@module-federation/node/runtimePlugin'],
+      exposes: {
+        './Button': './src/Button.jsx',
+        './Dialog': './src/Dialog.jsx',
+        './Logo': './src/Logo.jsx',
+        './ToolTip': './src/ToolTip.jsx',
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: '19.2.3' },
+        'react-dom': { singleton: true, requiredVersion: '19.2.3' },
+      },
+    }),
+  ],
+};

examples/federation/component-app/rstest.config.ts

@@ -0,0 +1,45 @@
+import path from 'node:path';
+import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { defineConfig, federation } from '@rstest/core';
+
+export default defineConfig({
+  globalSetup: ['./scripts/rstestGlobalSetup.ts'],
+  testEnvironment: 'node',
+  plugins: [pluginReact(), federation()],
+  testTimeout: 15000,
+  federation: true,
+  tools: {
+    rspack: (config) => {
+      config.plugins ??= [];
+      config.plugins.push(
+        new ModuleFederationPlugin({
+          name: 'component_app_node_test',
+          library: { type: 'commonjs-module', name: 'component_app_node_test' },
+          remoteType: 'commonjs',
+          remotes: {
+            'node-local-remote': `commonjs ${path.resolve(
+              __dirname,
+              '../node-local-remote/dist-node/remoteEntry.js',
+            )}`,
+          },
+          runtimePlugins: ['@module-federation/node/runtimePlugin'],
+          shared: {
+            react: { singleton: true, eager: true, requiredVersion: '19.2.3' },
+            'react-dom': {
+              singleton: true,
+              eager: true,
+              requiredVersion: '19.2.3',
+            },
+          },
+          experiments: {
+            optimization: {
+              target: 'node', // Required for Node.js test environment
+            },
+          },
+        }),
+      );
+      return config;
+    },
+  },
+});