From d90295b38b9aee18a1e5afe5e408f2118d9ecfb0 Mon Sep 17 00:00:00 2001 From: Karina Date: Sat, 14 Sep 2024 11:35:53 +0800 Subject: [PATCH] feat: adjust bridge router alias strategy (#2950) --- .changeset/fifty-kangaroos-compete.md | 5 ++ .../bridge-react-webpack-plugin/src/utis.ts | 83 ++++++++++--------- 2 files changed, 50 insertions(+), 38 deletions(-) create mode 100644 .changeset/fifty-kangaroos-compete.md diff --git a/.changeset/fifty-kangaroos-compete.md b/.changeset/fifty-kangaroos-compete.md new file mode 100644 index 00000000000..481a57b24c0 --- /dev/null +++ b/.changeset/fifty-kangaroos-compete.md @@ -0,0 +1,5 @@ +--- +'@module-federation/bridge-react-webpack-plugin': patch +--- + +chore: adjust bridge router alias strategy to alias to router-v6 when not found react-router-dom in package.json diff --git a/packages/bridge/bridge-react-webpack-plugin/src/utis.ts b/packages/bridge/bridge-react-webpack-plugin/src/utis.ts index 5fd82b15ad4..00958cf16b6 100644 --- a/packages/bridge/bridge-react-webpack-plugin/src/utis.ts +++ b/packages/bridge/bridge-react-webpack-plugin/src/utis.ts @@ -30,9 +30,7 @@ export const findPackageJson = (startPath: string): string | null => { return null; }; -export const getBridgeRouterAlias = ( - originalAlias: string, -): Record => { +const getDependencies = () => { const userPackageJsonPath = path.resolve(process.cwd(), 'package.json'); let userDependencies: Record = {}; @@ -45,35 +43,19 @@ export const getBridgeRouterAlias = ( ...userPackageJson.devDependencies, }; } + return userDependencies; +}; - let bridgeRouterAlias = {}; - let majorVersion = 0; - let reactRouterDomPath = ''; - - const reactRouterDomVersion = userDependencies['react-router-dom']; - - if (originalAlias) { - reactRouterDomPath = originalAlias; - } else if (reactRouterDomVersion) { - majorVersion = checkVersion(reactRouterDomVersion); - reactRouterDomPath = require.resolve('react-router-dom'); - } else { - reactRouterDomPath = require.resolve('react-router-dom'); - } - - const packageJsonPath = findPackageJson(reactRouterDomPath); - - if (packageJsonPath) { - const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8')); - majorVersion = checkVersion(packageJson.version); - } else { - console.warn('Unable to find package.json for react-router-dom'); - } +const reactRouterDomV5AliasPath = + '@module-federation/bridge-react/dist/router-v5.es.js'; +const reactRouterDomV6AliasPath = + '@module-federation/bridge-react/dist/router-v6.es.js'; +const setRouterAlias = (majorVersion: number, reactRouterDomPath: string) => { + let bridgeRouterAlias = {}; if (majorVersion === 5) { bridgeRouterAlias = { - 'react-router-dom$': - '@module-federation/bridge-react/dist/router-v5.es.js', + 'react-router-dom$': reactRouterDomV5AliasPath, }; try { require.resolve('react-router-dom/index.js'); @@ -86,10 +68,8 @@ export const getBridgeRouterAlias = ( } } else if (majorVersion === 6) { bridgeRouterAlias = { - 'react-router-dom$': - '@module-federation/bridge-react/dist/router-v6.es.js', + 'react-router-dom$': reactRouterDomV6AliasPath, }; - try { require.resolve('react-router-dom/dist/index.js'); } catch (error) { @@ -99,13 +79,40 @@ export const getBridgeRouterAlias = ( 'react-router-dom/dist/index.js': reactRouterDomPath, }; } - } else { - console.warn('react-router-dom version is not supported'); } - - console.log( - '<<<<<<<<<<<<< bridgeRouterAlias >>>>>>>>>>>>>', - bridgeRouterAlias, - ); return bridgeRouterAlias; }; + +export const getBridgeRouterAlias = ( + originalAlias: string, +): Record => { + const userDependencies = getDependencies(); + const reactRouterDomPath = originalAlias + ? originalAlias + : userDependencies['react-router-dom'] + ? require.resolve('react-router-dom') + : ''; + const packageJsonPath = reactRouterDomPath + ? findPackageJson(reactRouterDomPath) + : ''; + // if find react-router-dom in package.json + if (packageJsonPath) { + const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8')); + const majorVersion = checkVersion(packageJson.version); + const bridgeRouterAlias = setRouterAlias(majorVersion, reactRouterDomPath); + console.log( + '<<<<<<<<<<<<< bridgeRouterAlias >>>>>>>>>>>>>', + bridgeRouterAlias, + ); + return bridgeRouterAlias; + } else { + const bridgeRouterAlias = { + 'react-router-dom$': reactRouterDomV6AliasPath, + }; + console.log( + '<<<<<<<<<<<<< default bridgeRouterAlias >>>>>>>>>>>>>', + bridgeRouterAlias, + ); + return bridgeRouterAlias; + } +};