fix(bridge-react-webpack-plugin): fix the proxying react-router failed issue in the modernjs projects

.changeset/fair-hounds-sleep.md

@@ -0,0 +1,6 @@
+---
+'@module-federation/bridge-react-webpack-plugin': patch
+'@module-federation/enhanced': patch
+---
+
+fix(bridge-react-webpack-plugin): fix the proxying react-router failed issue in the modernjs projects

.changeset/swift-dancers-cross.md

@@ -0,0 +1,9 @@
+---
+'@module-federation/bridge-react-webpack-plugin': patch
+'@module-federation/enhanced': patch
+'@module-federation/modern-js': patch
+'@module-federation/rspack': patch
+'@module-federation/sdk': patch
+---
+
+feat(react-bridge): support the bridge.enable configuration to allow users to explicitly enable and disable the bridge capability

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

@@ -1,5 +1,3 @@
-import fs from 'node:fs';
-import path from 'node:path';
 import type { moduleFederationPlugin } from '@module-federation/sdk';
 import { getBridgeRouterAlias } from './utis';
 
@@ -33,28 +31,17 @@ class ReactBridgeAliasChangerPlugin {
 
   apply(compiler: any) {
     compiler.hooks.afterEnvironment.tap('ReactBridgeAliasPlugin', () => {
-      // Gets the path to the node_modules directory
-      const nodeModulesPath = path.resolve(compiler.context, 'node_modules');
-      const targetFilePath = path.join(nodeModulesPath, this.targetFile);
+      const originalResolve = compiler.options.resolve || {};
+      const originalAlias = originalResolve.alias || {};
+      const updatedAlias = {
+        ...getBridgeRouterAlias(originalAlias['react-router-dom']),
+        ...originalAlias,
+      };
 
-      if (fs.existsSync(targetFilePath)) {
-        const originalResolve = compiler.options.resolve || {};
-        const originalAlias = originalResolve.alias || {};
-
-        // Update alias
-        const updatedAlias = {
-          // allow `alias` can be override
-          // [this.alias]: targetFilePath,
-          ...getBridgeRouterAlias(originalAlias['react-router-dom']),
-          ...originalAlias,
-        };
-
-        // Update the webpack configuration
-        compiler.options.resolve = {
-          ...originalResolve,
-          alias: updatedAlias,
-        };
-      }
+      compiler.options.resolve = {
+        ...originalResolve,
+        alias: updatedAlias,
+      };
     });
   }
 }

packages/enhanced/src/schemas/container/ModuleFederationPlugin.check.ts

@@ -382,7 +382,10 @@ const t = {
       },
       bridge: {
         type: 'object',
-        properties: { disableAlias: { type: 'boolean', default: !1 } },
+        properties: {
+          disableAlias: { type: 'boolean', default: !1 },
+          enable: { type: 'boolean', default: !1 },
+        },
         additionalProperties: !1,
       },
       virtualRuntimeEntry: { type: 'boolean' },

packages/enhanced/src/schemas/container/ModuleFederationPlugin.ts

@@ -829,6 +829,11 @@ export default {
           type: 'boolean',
           default: false,
         },
+        enable: {
+          description: 'Whether to enable the bridge',
+          type: 'boolean',
+          default: false,
+        },
       },
       additionalProperties: false,
     },

packages/enhanced/src/wrapper/ModuleFederationPlugin.ts

@@ -2,10 +2,7 @@ import type { WebpackPluginInstance, Compiler } from 'webpack';
 import type { moduleFederationPlugin } from '@module-federation/sdk';
 import type IModuleFederationPlugin from '../lib/container/ModuleFederationPlugin';
 import type { ResourceInfo } from '@module-federation/manifest';
-
 import { getWebpackPath } from '@module-federation/sdk/normalize-webpack-path';
-import path from 'node:path';
-import fs from 'node:fs';
 import ReactBridgePlugin from '@module-federation/bridge-react-webpack-plugin';
 
 export const PLUGIN_NAME = 'ModuleFederationPlugin';
@@ -29,16 +26,9 @@ export default class ModuleFederationPlugin implements WebpackPluginInstance {
     this._mfPlugin = new CoreModuleFederationPlugin(this._options);
     this._mfPlugin!.apply(compiler);
 
-    // react bridge plugin
-    const nodeModulesPath = path.resolve(compiler.context, 'node_modules');
-    const reactPath = path.join(
-      nodeModulesPath,
-      '@module-federation/bridge-react',
-    );
-    // Check whether react exists
     if (
-      fs.existsSync(reactPath) &&
-      (!this._options?.bridge || !this._options.bridge.disableAlias)
+      this._options?.bridge?.enable &&
+      this._options?.bridge?.disableAlias !== true
     ) {
       new ReactBridgePlugin({
         moduleFederationOptions: this._options,

packages/modernjs/src/cli/configPlugin.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import fs from 'fs';
+// import fs from 'fs';
 import { getIPV4, isWebTarget, skipByTarget } from './utils';
 import { moduleFederationPlugin, encodeName } from '@module-federation/sdk';
 import { bundle } from '@modern-js/node-bundle-require';
@@ -163,26 +163,19 @@ export const patchMFConfig = (
 
   const runtimePlugins = [...(mfConfig.runtimePlugins || [])];
 
-  try {
-    const nodeModulesPath = path.resolve(process.cwd(), 'node_modules');
-    const bridgeReactPath = path.join(
-      nodeModulesPath,
-      '@module-federation/bridge-react',
-    );
-    if (
-      fs.existsSync(bridgeReactPath) &&
-      (!mfConfig?.bridge || !mfConfig.bridge.disableAlias)
-    ) {
-      mfConfig.bridge = {
-        disableAlias: true,
-      };
-      logger.debug(
-        `${PLUGIN_IDENTIFIER} use "@module-federation/modern-js/react" instead of "@module-federation/bridge-react" !`,
-      );
-    }
-  } catch (e) {
-    // noop
-  }
+  // or set disableAlias only in ssr mode
+  // try {
+  //   if (mfConfig?.bridge?.enable && mfConfig?.bridge?.disableAlias !== true) {
+  //     mfConfig.bridge = {
+  //       disableAlias: true,
+  //     };
+  //     logger.debug(
+  //       `${PLUGIN_IDENTIFIER} use "@module-federation/modern-js/react" instead of "@module-federation/bridge-react" !`,
+  //     );
+  //   }
+  // } catch (e) {
+  //   // noop
+  // }
   patchDTSConfig(mfConfig, isServer);
 
   injectRuntimePlugins(

packages/rspack/src/ModuleFederationPlugin.ts

@@ -186,11 +186,7 @@ export class ModuleFederationPlugin implements RspackPluginInstance {
       '@module-federation/bridge-react',
     );
 
-    // Check whether react exists
-    if (
-      fs.existsSync(reactPath) &&
-      (!options?.bridge || !options.bridge.disableAlias)
-    ) {
+    if (options?.bridge?.enable && options?.bridge?.disableAlias !== true) {
       new ReactBridgePlugin({
         moduleFederationOptions: this._options,
       }).apply(compiler);

packages/sdk/src/types/plugins/ModuleFederationPlugin.ts

@@ -278,6 +278,11 @@ export interface ModuleFederationPluginOptions {
      * @default false
      */
     disableAlias?: boolean;
+    /**
+     * Whether to enable the bridge
+     * @default false
+     */
+    enable?: boolean;
   };
   /**
    * Configuration for async boundary plugin