Webpack Module Federation配置后报ScriptExternalLoadError如何解决

1. 修正核心配置错误 #

你消费方的remotes配置不符合规则，remotes字段的取值格式为远程模块声明的name@远程入口文件地址，你错误将@前缀写成了导出的模块名Gallery，实际应该填写远程提供方ModuleFederationPlugin中配置的name值Picture：

// 修正后的消费方webpack配置
new ModuleFederationPlugin({
    name: "Consumer",
    filename: "entryPoint.js",
    remotes: {
      // 原错误写法：Picture: "Gallery@http://localhost:3000/entryPoint.js"
      Picture: "Picture@http://localhost:3000/entryPoint.js",
    },
  }),

2. 验证远程服务与资源有效性 #

• 确认远程模块提供方的服务正常启动在3000端口，直接在浏览器访问http://localhost:3000/entryPoint.js，确认可以正常加载到js内容，没有404、500等报错
• 检查远程服务的跨域配置，避免消费方访问域名和3000端口不一致导致跨域拦截，无法加载脚本
• 检查远程提供方构建后的产物目录，确认确实生成了entryPoint.js以及对应的模块分片文件，且静态资源服务的根目录正确映射到了产物目录

3. 验证运行结果 #

修正配置后重新启动两个项目，正常情况下控制台会打印出模块导出对象，default属性对应你导出的值3，可通过comp.default获取对应值。

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