Webpack Module Federation加载远程React应用时模块找不到报错求助

1. 修复重复的参数定义 #

你的importRemote配置里重复定义了remoteEntryFileName，这会导致参数冲突覆盖，优先保留与远程应用实际文件名一致的配置。如果远程应用的remoteEntry文件是campaign.js，修正后的代码如下：

return importRemote({
    module: 'main',
    scope: 'campaign',
    bustRemoteEntryCache: true,
    remoteEntryFileName: 'campaign.js',
    version: 'some-version',
    url: 'https://localhost.corp.xyz.com:12398',
});

2. 验证远程应用的Webpack配置 #

确保远程应用的Module Federation配置与你的导入参数完全匹配：

• scope匹配：远程应用的name字段必须等于你importRemote里的scope值'campaign'
• 文件名匹配：远程应用的filename字段必须等于remoteEntryFileName的值'campaign.js'
• 导出模块匹配：exposes配置里必须明确导出'./main'，对应你importRemote里的module: 'main'

示例远程应用Webpack配置：

// 远程应用webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'campaign',
      filename: 'campaign.js',
      exposes: {
        './main': './src/你的主入口模块路径.js',
      },
      // 其他配置...
    }),
  ],
};

3. 确认remoteEntry路径正确性 #

检查浏览器网络面板中加载的remoteEntry完整URL是否符合预期：

• 若未配置version，完整路径应为https://localhost.corp.xyz.com:12398/campaign.js
• 若配置了version: 'some-version'，插件可能会拼接为https://localhost.corp.xyz.com:12398/some-version/campaign.js，需确认远程应用是否在该路径下部署了文件

4. 手动验证远程模块可用性 #

在浏览器控制台执行以下代码，直接检查远程模块是否可访问：

// 检查scope是否挂载到window对象
console.log(window.campaign);
// 尝试获取导出的main模块
window.campaign?.get('./main').then(module => console.log(module));

如果window.campaign不存在，说明remoteEntry加载或解析异常；如果get('./main')返回错误，说明远程应用未正确导出该模块。

内容的提问来源于stack exchange，提问作者Vishal Kumar