feat(bridge-react): support react router 8 package layout

Author: BleedingDev

.changeset/react-router-eight-bridge.md

@@ -0,0 +1,7 @@
+---
+"@module-federation/bridge-react": patch
+"@module-federation/bridge-react-webpack-plugin": patch
+"@module-federation/modern-js-v3": patch
+---
+
+Support the React Router 8 package layout in the React bridge without requiring react-router-dom.

packages/bridge/bridge-react-webpack-plugin/README.md

@@ -74,6 +74,28 @@ export default defineConfig({
 });
 ```
 
+For React Router 8 applications, `react-router-dom` is no longer installed.
+Import routing APIs from `react-router`, import DOM-specific APIs from
+`react-router/dom`, and alias both entries to the v8 bridge proxy:
+
+```js
+//rsbuild.config.ts
+const reactRouterPath = path.dirname(require.resolve('react-router/package.json'));
+
+export default defineConfig({
+  source: {
+    alias: {
+      'react-router$': path.resolve(__dirname, 'node_modules/@module-federation/bridge-react/dist/router-v8.es.js'),
+      'react-router/dom$': path.resolve(__dirname, 'node_modules/@module-federation/bridge-react/dist/router-v8-dom.es.js'),
+      'react-router/dist/development/index.js': reactRouterPath,
+      'react-router/dist/production/index.js': reactRouterPath,
+      'react-router/dist/development/dom-export.js': path.join(reactRouterPath, 'dist/development/dom-export.js'),
+      'react-router/dist/production/dom-export.js': path.join(reactRouterPath, 'dist/production/dom-export.js'),
+    },
+  },
+});
+```
+
 # 3. Load the module with routing
 
 ```js

packages/bridge/bridge-react-webpack-plugin/__tests__/mockRouterDir/router-v6/react-router/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "react-router",
+  "version": "6.30.3"
+}

packages/bridge/bridge-react-webpack-plugin/__tests__/mockRouterDir/router-v8/react-router/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "react-router",
+  "version": "8.0.0",
+  "description": "Declarative routing for React applications",
+  "keywords": [
+    "react",
+    "router",
+    "route",
+    "routing"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/remix-run/react-router",
+    "directory": "packages/react-router"
+  },
+  "license": "MIT",
+  "author": "Remix Software <[email protected]>",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/production/index.d.ts",
+      "default": "./dist/production/index.js"
+    },
+    "./dom": {
+      "types": "./dist/production/dom-export.d.ts",
+      "default": "./dist/production/dom-export.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=19.2.7",
+    "react-dom": ">=19.2.7"
+  },
+  "engines": {
+    "node": ">=22.22.0"
+  }
+}

packages/bridge/bridge-react-webpack-plugin/__tests__/utils.spec.ts

@@ -14,6 +14,10 @@ const resolveRouterV6 = path.resolve(
   __dirname,
   '../__tests__/mockRouterDir/router-v6/react-router-dom/dist/main.js',
 );
+const resolveRouterV6Core = path.resolve(
+  __dirname,
+  '../__tests__/mockRouterDir/router-v6/react-router',
+);
 const resolveRouterV6_PkgPath = path.resolve(
   __dirname,
   '../__tests__/mockRouterDir/router-v6/react-router-dom/package.json',
@@ -26,6 +30,18 @@ const resolveRouterV7_PkgPath = path.resolve(
   __dirname,
   '../__tests__/mockRouterDir/router-v7/react-router/package.json',
 );
+const resolveRouterV8 = path.resolve(
+  __dirname,
+  '../__tests__/mockRouterDir/router-v8/react-router',
+);
+const resolveRouterV8Entry = path.join(
+  resolveRouterV8,
+  'dist/production/index.js',
+);
+const resolveRouterV8_PkgPath = path.resolve(
+  __dirname,
+  '../__tests__/mockRouterDir/router-v8/react-router/package.json',
+);
 
 describe('test checkVersion: should return the correct major version for react-router-dom', () => {
   it('should return 5', () => {
@@ -59,17 +75,26 @@ describe('test checkVersion: should return the correct major version for react-r
   it('should return 7', () => {
     expect(checkVersion('^7.0.0')).toBe(7);
   });
+
+  it('should return 8', () => {
+    expect(checkVersion('8.0.0')).toBe(8);
+  });
+
+  it('should return 8', () => {
+    expect(checkVersion('^8.0.0')).toBe(8);
+  });
 });
 
-describe('test findPackageJson: should return the correct package.json path for react-router-dom v5, v6 and react-router v7', () => {
+describe('test findPackageJson: should return the correct package.json path for react-router-dom v5/v6 and react-router v7/v8', () => {
   it('should return the package.json path', () => {
     expect(findPackageJson(resolveRouterV5)).toBe(resolveRouterV5_PkgPath);
     expect(findPackageJson(resolveRouterV6)).toBe(resolveRouterV6_PkgPath);
     expect(findPackageJson(resolveRouterV7)).toBe(resolveRouterV7_PkgPath);
+    expect(findPackageJson(resolveRouterV8)).toBe(resolveRouterV8_PkgPath);
   });
 });
 
-describe('test getBridgeRouterAlias: should return the correct alias for react-router-dom v5, v6 and react-router v7', () => {
+describe('test getBridgeRouterAlias: should return the correct alias for react-router-dom v5/v6 and react-router v7/v8', () => {
   it('should return the correct alias for router v5', () => {
     const res = getBridgeRouterAlias(resolveRouterV5);
     expect(res).toEqual({
@@ -99,4 +124,69 @@ describe('test getBridgeRouterAlias: should return the correct alias for react-r
       'react-router-dom/dist/index.js': resolveRouterV7,
     });
   });
+
+  it('should return the correct alias for router v8', () => {
+    const res = getBridgeRouterAlias(resolveRouterV8);
+    expect(res).toEqual({
+      'react-router$': '@module-federation/bridge-react/dist/router-v8.es.js',
+      'react-router/dom$':
+        '@module-federation/bridge-react/dist/router-v8-dom.es.js',
+      'react-router/dist/development/index.js': resolveRouterV8,
+      'react-router/dist/production/index.js': resolveRouterV8,
+      'react-router/dist/development/dom-export.js': path.join(
+        resolveRouterV8,
+        'dist/development/dom-export.js',
+      ),
+      'react-router/dist/production/dom-export.js': path.join(
+        resolveRouterV8,
+        'dist/production/dom-export.js',
+      ),
+    });
+  });
+
+  it('should prefer an explicit react-router alias for router v8', () => {
+    const res = getBridgeRouterAlias({ reactRouterAlias: resolveRouterV8 });
+    expect(res['react-router$']).toBe(
+      '@module-federation/bridge-react/dist/router-v8.es.js',
+    );
+    expect(res['react-router/dom$']).toBe(
+      '@module-federation/bridge-react/dist/router-v8-dom.es.js',
+    );
+  });
+
+  it('should normalize an explicit react-router entry alias for router v8', () => {
+    const res = getBridgeRouterAlias({
+      reactRouterAlias: resolveRouterV8Entry,
+    });
+
+    expect(res['react-router/dist/production/index.js']).toBe(resolveRouterV8);
+    expect(res['react-router/dist/production/dom-export.js']).toBe(
+      path.join(resolveRouterV8, 'dist/production/dom-export.js'),
+    );
+  });
+
+  it('should prefer an explicit react-router-dom alias for router v6 when both aliases exist', () => {
+    const res = getBridgeRouterAlias({
+      reactRouterAlias: resolveRouterV6Core,
+      reactRouterDomAlias: resolveRouterV6,
+    });
+
+    expect(res).toEqual({
+      'react-router-dom$':
+        '@module-federation/bridge-react/dist/router-v6.es.js',
+      'react-router-dom/dist/index.js': resolveRouterV6,
+    });
+  });
+
+  it('should prefer an explicit react-router alias for router v7 when both aliases exist', () => {
+    const res = getBridgeRouterAlias({
+      reactRouterAlias: resolveRouterV7,
+      reactRouterDomAlias: resolveRouterV6,
+    });
+
+    expect(res['react-router$']).toBe(
+      '@module-federation/bridge-react/dist/router-v7.es.js',
+    );
+    expect(res['react-router-dom/dist/index.js']).toBe(resolveRouterV7);
+  });
 });

packages/bridge/bridge-react-webpack-plugin/src/index.ts

@@ -45,7 +45,10 @@ class ReactBridgeAliasChangerPlugin {
         const updatedAlias: Record<string, string> = {
           // allow `alias` can be override
           // [this.alias]: targetFilePath,
-          ...getBridgeRouterAlias(originalAlias['react-router-dom']),
+          ...getBridgeRouterAlias({
+            reactRouterAlias: originalAlias['react-router'],
+            reactRouterDomAlias: originalAlias['react-router-dom'],
+          }),
           ...originalAlias,
         };