Module Federation跨应用加载ChunkLoadError问题求助

问题本质分析 #

ChunkLoadError提示缺失目标chunk文件，且该chunk请求返回text/html类型响应，说明服务器未找到对应chunk资源，返回了默认HTML页面（如CRA的index.html），而非预期的JS chunk。entryFile请求200仅代表远程入口文件可正常获取，但chunk路径解析存在错误。

1. 修正远程CRA的publicPath配置 #

CRA默认publicPath为/，若远程应用部署路径或Module Federation配置的publicPath不匹配，会导致chunk加载路径错误：

// 远程CRA的webpack配置片段（通过craco/react-app-rewired修改）
new ModuleFederationPlugin({
  name: 'remoteApp',
  filename: 'remoteEntry.js',
  exposes: {
    './ConstTest': './src/constTest.ts'
  },
  // 关键：publicPath需匹配远程应用的实际部署/访问路径
  publicPath: process.env.NODE_ENV === 'production' 
    ? '/your-production-path/' 
    : 'http://localhost:3000/',
})

本地开发时必须明确指定http://localhost:3000/，避免宿主应用（Superset）用自身域名路径请求远程chunk。

2. 验证Chunk生成路径与输出配置 #

检查CRA构建后的chunk实际生成位置：

• 本地开发时CRA默认将chunk输出到http://localhost:3000/static/js/，若报错路径为static/assets/，说明output配置被错误修改：

  // 错误示例：output配置导致chunk路径异常
  output: {
    filename: 'static/assets/[name].[contenthash].chunk.js'
  }
  

  需确保output.filename与dev server的资源映射路径一致，或调整publicPath匹配该输出路径。

3. 核对宿主Superset的远程配置 #

确保Superset的Module Federationremotes配置指向正确的远程入口：

// Superset（宿主）的webpack配置片段
new ModuleFederationPlugin({
  name: 'supersetHost',
  remotes: {
    remoteApp: 'remoteApp@http://localhost:3000/remoteEntry.js'
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true }
  }
})

确认remoteEntry.js的URL无拼写错误，且可正常访问（已确认entryFile状态200，此步重点检查格式正确性）。

4. 调整CRA Dev Server的路由重定向规则 #

CRA dev server默认会将未匹配的请求重定向到index.html，这是chunk请求返回HTML的直接原因，需排除静态资源路径的重定向：

// craco.config.js或react-app-rewired配置
devServer: {
  historyApiFallback: {
    disableDotRule: true,
    rewrites: [
      // 确保静态资源路径直接返回对应文件，不重定向到index.html
      { from: /^\/static\/.*$/, to: context => context.parsedUrl.pathname }
    ]
  }
}

可直接访问http://localhost:3000/static/js/src_constTest_ts.xxx.chunk.js验证：若返回JS文件则路径配置正常，若返回HTML则路由规则需调整。

5. 规范远程模块导入方式 #

必须通过Module Federation暴露的模块路径导入，禁止直接指定chunk文件路径：

// 正确用法：通过远程应用别名+暴露的模块名导入
const ConstTest = React.lazy(() => import('remoteApp/ConstTest'));

// 错误用法：手动指定chunk路径会导致解析错误
// import('http://localhost:3000/static/assets/src_constTest_ts.84972c0c.chunk.js')

配合React.Suspense实现远程模块的懒加载，是Module Federation的标准实践。

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