使用Craco+Module Federation时Hot reload失效的解决方法咨询

问题背景 #

在React项目中使用Craco配置ModuleFederation时，一旦配置exposes字段，代码热重载（Hot reload）就无法正常工作；注释掉该字段后热重载恢复正常。需要在保留exposes配置的前提下修复热重载问题。

当前使用的craco.config.js配置如下：

const path = require('path')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const { getLoader, loaderByName } = require('@craco/craco')
const packages = []
const deps = require('./package.json').dependencies

module.exports = {
  webpack: {
    configure: (webpackConfig, arg) => {
      const { isFound, match } = getLoader(
        webpackConfig,
        loaderByName('babel-loader'),
      )
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include]

        match.loader.include = include.concat(packages)
      }

      webpackConfig.output = {
        ...webpackConfig.output,
        publicPath:
          process.env.REACT_APP_BASE_URL ||
          `http://localhost:${process.env.PORT}/`,
      }
      webpackConfig.resolve = {
        ...webpackConfig.resolve,
        fallback: {
          crypto: false,
        },
      }

      webpackConfig.plugins.push(
        new ModuleFederationPlugin({
          name: 'MyCode',
          filename: 'remoteEntry.js',
          exposes: {
            './MyCodeApp': './src/routes/main',
          },
        }),
      )

      return webpackConfig
    },
  },
  plugins: [],
}

解决方案 #

1. 核心修复思路 #

问题根源在于ModuleFederation的exposes会将指定模块打包为远程入口，导致Webpack热重载机制无法正确识别模块更新。需要针对开发环境调整配置，避免缓存干扰并确保热重载逻辑正常运行。

2. 修改后的craco.config.js配置 #

const path = require('path')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const { getLoader, loaderByName } = require('@craco/craco')
const packages = []
const deps = require('./package.json').dependencies
const isDevelopment = process.env.NODE_ENV === 'development'

module.exports = {
  webpack: {
    configure: (webpackConfig, arg) => {
      const { isFound, match } = getLoader(
        webpackConfig,
        loaderByName('babel-loader'),
      )
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include]

        match.loader.include = include.concat(packages)
      }

      webpackConfig.output = {
        ...webpackConfig.output,
        publicPath:
          process.env.REACT_APP_BASE_URL ||
          `http://localhost:${process.env.PORT}/`,
        // 开发环境禁用哈希文件名，避免热重载缓存
        filename: isDevelopment ? '[name].js' : webpackConfig.output.filename,
        chunkFilename: isDevelopment ? '[name].chunk.js' : webpackConfig.output.chunkFilename,
      }
      webpackConfig.resolve = {
        ...webpackConfig.resolve,
        fallback: {
          crypto: false,
        },
      }

      // 开发环境配置缓存规则，确保修改配置后触发重建
      if (isDevelopment) {
        webpackConfig.cache = {
          type: 'filesystem',
          buildDependencies: {
            config: [__filename],
          },
        }
        // 强制开启热重载，关闭liveReload避免冲突
        webpackConfig.devServer = {
          ...webpackConfig.devServer,
          hot: true,
          liveReload: false,
        }
      }

      webpackConfig.plugins.push(
        new ModuleFederationPlugin({
          name: 'MyCode',
          filename: 'remoteEntry.js',
          exposes: {
            './MyCodeApp': './src/routes/main',
          },
          // 区分环境配置共享依赖，开发环境确保依赖单例且预加载
          shared: isDevelopment ? {
            react: { singleton: true, eager: true },
            'react-dom': { singleton: true, eager: true },
          } : {
            ...deps,
            react: { singleton: true, requiredVersion: deps.react },
            'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
          },
        }),
      )

      return webpackConfig
    },
  },
  plugins: [],
}

3. 关键修复点说明 #

• 环境区分：通过NODE_ENV判断开发/生产环境，针对性调整配置，不影响生产打包逻辑。
• 输出文件名：开发环境下使用无哈希的文件名，避免浏览器缓存旧模块导致热重载失效。
• 共享依赖配置：开发环境将React和ReactDOM设置为eager: true（预加载）和singleton: true（单例），确保依赖只加载一次，热重载时能正确更新。
• 缓存与DevServer设置：开发环境配置文件系统缓存并关联配置文件，同时强制开启热重载、关闭liveReload，确保热重载逻辑优先执行。

4. 验证步骤 #

1. 替换原有的craco.config.js文件。
2. 重启开发服务器（npm start或yarn start）。
3. 修改代码后观察页面是否自动更新，确认热重载正常工作。

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