fix(bridge-react): wrap react-router-dom path resolve with try catch (#3232)

Author: danpeen

.changeset/ten-games-suffer.md

@@ -0,0 +1,6 @@
+---
+'@module-federation/bridge-react-webpack-plugin': patch
+'@module-federation/bridge-react': patch
+---
+
+fix: wrap try catch with react-router-dom path resolve

apps/router-demo/router-remote1-2001/rsbuild.config.ts

@@ -10,10 +10,10 @@ export default defineConfig({
       react: path.resolve(__dirname, 'node_modules/react'),
       'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
       // set `react-router-dom/` to reference react-router-dom v5 which shoule be find in node_modules/react-router-dom, otherwise it will cause app.tsx fail to work which in react-router-dom v5 mode.
-      'react-router-dom': path.resolve(
-        __dirname,
-        'node_modules/react-router-dom',
-      ),
+      // 'react-router-dom': path.resolve(
+      //   __dirname,
+      //   'node_modules/react-router-dom',
+      // ),
     },
   },
   server: {

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

@@ -87,18 +87,28 @@ export const getBridgeRouterAlias = (
   originalAlias: string,
 ): Record<string, string> => {
   const userDependencies = getDependencies();
-  const reactRouterDomPath = originalAlias
-    ? originalAlias
-    : userDependencies['react-router-dom']
-      ? require.resolve('react-router-dom')
-      : '';
-  const packageJsonPath = reactRouterDomPath
-    ? findPackageJson(reactRouterDomPath)
-    : '';
+  let reactRouterDomPath = '';
+
+  if (originalAlias) {
+    reactRouterDomPath = originalAlias;
+  } else if (userDependencies['react-router-dom']) {
+    try {
+      reactRouterDomPath = path.resolve(
+        process.cwd(),
+        'node_modules/react-router-dom',
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   // if find react-router-dom in package.json
-  if (packageJsonPath) {
-    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
-    const majorVersion = checkVersion(packageJson.version);
+  if (reactRouterDomPath) {
+    const packageJsonPath = findPackageJson(reactRouterDomPath) || '';
+    const packageJsonContent = JSON.parse(
+      fs.readFileSync(packageJsonPath, 'utf-8'),
+    );
+    const majorVersion = checkVersion(packageJsonContent.version);
     const bridgeRouterAlias = setRouterAlias(majorVersion, reactRouterDomPath);
     console.log(
       '<<<<<<<<<<<<< bridgeRouterAlias >>>>>>>>>>>>>',

packages/bridge/bridge-react/src/router-v5.tsx

@@ -36,7 +36,7 @@ function WraperRouter(
 }
 
 // @ts-ignore
-// cause export directly from react-router-dom/index.js will cause build falied.
+// because export directly from react-router-dom/index.js will cause build falied.
 // it will be replace by react-router-dom/index.js in building phase
 export * from 'react-router-dom/';
 

packages/bridge/bridge-react/src/router-v6.tsx

@@ -69,6 +69,7 @@ function WraperRouterProvider(
   }
 }
 
-export * from 'react-router-dom/dist/index.js';
+// export * from 'react-router-dom/dist/index.js';
+export * from 'react-router-dom/';
 export { WraperRouter as BrowserRouter };
 export { WraperRouterProvider as RouterProvider };

packages/bridge/bridge-react/src/utils.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { FederationHost } from '@module-federation/runtime';
 import { createLogger } from '@module-federation/sdk';
 
 export const LoggerInstance = createLogger(

packages/bridge/bridge-react/vite.config.ts

@@ -1,8 +1,8 @@
 import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
+// import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import dts from 'vite-plugin-dts';
-import react from '@vitejs/plugin-react';
+// import react from '@vitejs/plugin-react';
 import packageJson from './package.json';
 
 const perDepsKeys = Object.keys(packageJson.peerDependencies);
@@ -44,13 +44,13 @@ export default defineConfig({
           generateBundle(options, bundle) {
             for (const fileName in bundle) {
               const chunk = bundle[fileName];
-              // if (fileName.includes('router-v6') && chunk.type === 'chunk') {
-              //   chunk.code = chunk.code.replace(
-              //     // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
-              //     /react-router-dom\/(?=[\'\"\`])/g,
-              //     'react-router-dom/dist/index.js',
-              //   );
-              // }
+              if (fileName.includes('router-v6') && chunk.type === 'chunk') {
+                chunk.code = chunk.code.replace(
+                  // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
+                  /react-router-dom\/(?=[\'\"\`])/g,
+                  'react-router-dom/dist/index.js',
+                );
+              }
 
               if (fileName.includes('router-v5') && chunk.type === 'chunk') {
                 chunk.code = chunk.code.replace(