使用Webpack ModuleFederationPlugin构建微前端时遇react-refresh报错求助

可能的修复方案 #

• 排除微前端入口文件的react-refresh处理
  在webpack配置中，给react-refresh-webpack-plugin添加排除规则，避免它处理模块联邦的入口文件。示例配置：

  // webpack.config.js
  const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
  
  module.exports = {
    // ...其他配置项
    plugins: [
      new ReactRefreshWebpackPlugin({
        exclude: [/bootstrap\.js$/, /remoteEntry\.js$/], // 排除模块联邦相关的入口文件
      }),
      // ...你的ModuleFederationPlugin配置
    ],
  };
  

  模块联邦的入口文件（如bootstrap.js、remoteEntry.js）不需要热刷新处理，react-refresh对这类文件的篡改会导致originalFactory未被正确赋值。

• 降级react-refresh相关依赖版本
  部分高版本的@pmmmwh/react-refresh-webpack-plugin或react-refresh与ModuleFederationPlugin存在兼容性问题，可尝试降级到稳定兼容版本：

  npm install @pmmmwh/react-refresh-webpack-plugin@0.5.11 --save-dev
  npm install react-refresh@0.14.0 --save-dev
  

• 临时禁用开发环境的react-refresh
  如果开发阶段暂时不需要热刷新功能，可在模块联邦项目中关闭该插件：

  // webpack.config.js
  module.exports = {
    // ...其他配置项
    plugins: [
      // 仅在生产环境或非模块联邦项目启用react-refresh
      process.env.NODE_ENV === 'production' ? new ReactRefreshWebpackPlugin() : null,
      // ...你的ModuleFederationPlugin配置
    ].filter(Boolean),
  };
  

问题根源 #

react-refresh插件会修改模块的工厂函数，但模块联邦的入口模块结构和普通React组件模块不同，插件处理后会导致originalFactory变量未被正确初始化，进而调用call方法时触发undefined错误。

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