微前端中create-react-app+craco实现懒加载时出现ChunkLoadError

我在微前端项目中使用create-react-app + craco框架，给React组件添加懒加载功能后，微前端应用挂载时崩溃；不使用懒加载则能正常挂载。

测试环境：

• 微前端本地构建后，通过命令serve -s -p 3001启动，运行在localhost:3001
• 主应用通过yarn start启动，运行在localhost:3000

控制台错误：

我的craco配置如下：

/* eslint-disable global-require */
const PUBLIC_PATH = '/';
process.env.REACT_APP_BUILD_DATE = new Date().getTime() / 1000;

module.exports = {
  webpack: {
    configure: {
      output: {
        publicPath: PUBLIC_PATH,
        filename: '[name].js',
      },
      // optimization: {
      //    runtimeChunk: 'single',
      //    splitChunks: {
      //        chunks() {
      //            return false;
      //        },
      //    },
      // },
    },
  },
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          webpackConfig.plugins[5].options.filename = 'static/css/[name].css';
          webpackConfig.plugins[5].options.moduleFilename = () => 'static/css/main.css';
          return webpackConfig;
        },
      },
      options: {},
    },
    { plugin: require('@semantic-ui-react/craco-less') },
  ],
};

已尝试操作：

• 添加禁用缓存的meta标签
• 调整chunk配置（目前已注释）

关键问题：主应用容器尝试获取chunk的路径是端口3000，而非微前端部署的3001端口。

问题核心是webpack的publicPath配置错误，导致懒加载的chunk请求路径继承了主应用的域名（localhost:3000），而非微前端的部署地址（localhost:3001）。

1. 修正publicPath配置 #

将craco配置中的PUBLIC_PATH改为微前端的完整部署根地址：

// 替换原PUBLIC_PATH定义
const PUBLIC_PATH = 'http://localhost:3001/';

生产环境建议通过环境变量动态注入，避免硬编码：

const PUBLIC_PATH = process.env.REACT_APP_PUBLIC_PATH || '/';

构建时传入环境变量：

REACT_APP_PUBLIC_PATH=http://你的微前端域名/ npm run build

2. 适配微前端框架（如qiankun） #

如果主应用基于qiankun等微前端框架，需在微前端入口文件中动态设置__webpack_public_path__，确保资源路径正确：

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

3. 验证配置生效 #

构建完成后，检查build/static/js/下的chunk文件，查看其中的资源引用路径是否指向微前端的域名，确认配置生效。

4. 恢复代码分割配置（可选） #

若需要保留懒加载的代码分割能力，取消注释optimization配置并调整为：

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all', // 按需分割所有类型的chunk
  },
},

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