使用React+ModuleFederation无法加载多个远程应用到主应用

针对主应用仅能加载products远程应用、无法加载cart的情况，可按以下步骤排查修复：

1. 核对Cart应用的ModuleFederation配置 #

Cart应用的webpack配置中，ModuleFederationPlugin的参数必须和主应用remotes配置严格匹配：

• 确保name字段为"cart"（主应用remotes定义的是cart@http://localhost:8082/remoteEntryCart.js，name需完全一致）
• 确保filename字段为"remoteEntryCart.js"（和主应用中引用的文件名一致）
• 确认exposes字段正确配置了需要暴露的模块，示例配置：

new ModuleFederationPlugin({
  name: "cart",
  filename: "remoteEntryCart.js",
  exposes: {
    "./Cart": "./src/Cart", // 根据你的实际组件路径调整
  },
})

2. 验证Cart应用的remoteEntry文件可访问 #

直接在浏览器地址栏访问http://localhost:8082/remoteEntryCart.js，确认能正常返回JavaScript内容。如果无法访问：

• 检查Cart应用是否通过yarn start正常启动，端口是否为8082
• 检查Cart应用的devServer配置，确认port设置为8082，且无启动报错

3. 检查主应用导入Cart模块的代码 #

确保主应用中导入Cart模块的路径和Cart应用exposes的路径一致，示例代码：

// 对应Cart应用暴露的./Cart组件
const Cart = React.lazy(() => import("cart/Cart"));

路径拼写错误会直接导致模块加载失败。

4. 通过浏览器开发者工具排查错误 #

打开浏览器Console面板，查看是否存在remoteEntryCart.js加载失败、模块解析等报错；同时检查Network面板，确认remoteEntryCart.js是否成功请求并返回200状态码。常见问题包括：

• 跨域拦截（开发环境webpack devServer默认允许跨域，若有自定义配置需调整）
• 模块路径拼写错误
• 依赖版本冲突（如React版本不一致）

5. 统一各应用的依赖版本 #

确保主应用、products、cart三个应用的React、ReactDOM版本完全一致，ModuleFederation对共享依赖的版本敏感，版本不一致可能引发模块加载异常。

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