Webpack Module Federation导入组件报Invalid or unexpected token错误

报错核心诱因及修复方法 #

• 远程入口文件加载异常
  该错误绝大多数场景是加载remoteEntry.js时实际拿到的是HTML内容而非JS代码，浏览器解析HTML开头的<字符时触发语法报错。
  你可以直接在浏览器访问http://localhost:3001/remoteEntry.js验证返回内容：如果返回的是HTML文档，说明远程项目的开发服务器开启了历史路由回退配置，静态资源请求未匹配成功时返回了首页HTML。
  修复方案：调整远程项目开发服务器配置，确保静态资源请求优先级高于路由回退，让remoteEntry.js可以正常返回JS内容。
• remoteType配置两端不匹配
  你在远程侧配置了remoteType: 'var'，该模式下远程模块会挂载为window全局变量，但宿主侧的remotes配置写法仅适配Module Federation默认的script类型，格式不匹配导致模块解析失败。
  修复方案：删除远程侧的remoteType: 'var'配置，使用默认模块类型即可，无需修改其余配置。如果必须保留var类型，需要同步调整宿主侧的remotes配置，匹配全局变量加载规则。
• 共享依赖配置缺失
  如果宿主和远程项目的react、react-dom版本不一致，或者没有在Module Federation配置中声明公共共享依赖，会导致组件加载时依赖冲突，触发异常报错。
  修复方案：在两侧项目的Module Federation配置中添加共享依赖声明：

  shared: {
    react: { singleton: true, requiredVersion: '^当前项目使用的react版本号' },
    'react-dom': { singleton: true, requiredVersion: '^当前项目使用的react-dom版本号' }
  }
  

• 组件导入逻辑有误
  React.lazy仅支持加载默认导出的组件，如果远程侧的App组件是命名导出，需要调整导入逻辑适配：

  const OtherComponent = lazy(async () => {
    const module = await import("app1/App");
    return { default: module.App };
  });
  

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