diff --git a/.changeset/fair-hounds-sleep.md b/.changeset/fair-hounds-sleep.md new file mode 100644 index 00000000000..89897dfb1a7 --- /dev/null +++ b/.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 diff --git a/.changeset/swift-dancers-cross.md b/.changeset/swift-dancers-cross.md new file mode 100644 index 00000000000..839c51894cc --- /dev/null +++ b/.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 diff --git a/packages/bridge/bridge-react-webpack-plugin/src/index.ts b/packages/bridge/bridge-react-webpack-plugin/src/index.ts index da47bed04ba..517631a6d92 100644 --- a/packages/bridge/bridge-react-webpack-plugin/src/index.ts +++ b/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, + }; }); } } diff --git a/packages/enhanced/src/schemas/container/ModuleFederationPlugin.check.ts b/packages/enhanced/src/schemas/container/ModuleFederationPlugin.check.ts index a2c17aab47a..6bd962d1440 100644 --- a/packages/enhanced/src/schemas/container/ModuleFederationPlugin.check.ts +++ b/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' }, diff --git a/packages/enhanced/src/schemas/container/ModuleFederationPlugin.ts b/packages/enhanced/src/schemas/container/ModuleFederationPlugin.ts index 8c7f55aac82..e3e3bae4a0a 100644 --- a/packages/enhanced/src/schemas/container/ModuleFederationPlugin.ts +++ b/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, }, diff --git a/packages/enhanced/src/wrapper/ModuleFederationPlugin.ts b/packages/enhanced/src/wrapper/ModuleFederationPlugin.ts index 5994c53c5df..400411f68db 100644 --- a/packages/enhanced/src/wrapper/ModuleFederationPlugin.ts +++ b/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, diff --git a/packages/modernjs/src/cli/configPlugin.ts b/packages/modernjs/src/cli/configPlugin.ts index 64bd548c670..16de12909a4 100644 --- a/packages/modernjs/src/cli/configPlugin.ts +++ b/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( diff --git a/packages/rspack/src/ModuleFederationPlugin.ts b/packages/rspack/src/ModuleFederationPlugin.ts index 575b5342e6c..8969bf44347 100644 --- a/packages/rspack/src/ModuleFederationPlugin.ts +++ b/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); diff --git a/packages/sdk/src/types/plugins/ModuleFederationPlugin.ts b/packages/sdk/src/types/plugins/ModuleFederationPlugin.ts index de865cfcb63..97d5303a507 100644 --- a/packages/sdk/src/types/plugins/ModuleFederationPlugin.ts +++ b/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