使用CRA与Module Federation时Webpack Dev Server启动卡住问题

问题背景 #

使用create-react-app 5.0.1创建应用，希望通过Webpack Module Federation将应用部分代码暴露为remote服务。由于CRA原生不支持Module Federation，借助react-app-rewired修改Webpack配置，代码如下：

// config-overrides.js

const { ModuleFederationPlugin } = require('webpack').container
const deps = require('./package.json').dependencies

module.exports = function override(config) {
 config.plugins.push(
  new ModuleFederationPlugin({
    name: 'MyApp',
    shared: {
        react: {
            requiredVersion: deps.react,
            singleton: true,
        },
        'react-dom': {
            requiredVersion: deps['react-dom'],
            singleton: true,
        },
        'react-router-dom': {
            requiredVersion: deps['react-router-dom'],
            singleton: true,
        },
    },
    exposes: {
        './MyRemote': {
            import: './my/path/to/myfile.tsx',
            name: 'MyRemoteName',
        },
    },
  })
 )
}

执行npm run build正常完成，但执行npm start时，CRA自带的webpack-dev-server卡在"Starting development server..."状态，长时间无进展。

为排查问题，移除react-app-rewired并执行eject，将ModuleFederationPlugin直接添加到webpack.config.js中，打印dev server配置后启动仍卡住，配置输出如下：

$ npm start

> telo-ui@10.0.0 start
> node scripts/start.js

>>> serverConfig {
  allowedHosts: 'all',
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': '*'
  },
  compress: true,
  static: {
    directory: 'C:\\DEV\\Abstract\\telo-ui-4\\public',
    publicPath: [ '/' ],
    watch: {
      ignored: /^(?!C:\/DEV\/Abstract\/telo\x2dui\x2d4\/src\/).+\/node_modules\//g
    }
  },
  client: {
    webSocketURL: { hostname: undefined, pathname: undefined, port: undefined },
    overlay: { errors: true, warnings: false }
  },
  devMiddleware: { publicPath: '' },
  https: false,
  host: '0.0.0.0',
  historyApiFallback: { disableDotRule: true, index: '/' },
  proxy: undefined,
  onBeforeSetupMiddleware: [Function: onBeforeSetupMiddleware],
  onAfterSetupMiddleware: [Function: onAfterSetupMiddleware],
  port: 3000
}
(node:8652) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:8652) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

可能的问题根源 #

• exposes路径或文件异常：检查./my/path/to/myfile.tsx的相对路径是否正确（以项目根目录为基准），确认目标文件存在、无语法错误或循环引用。Webpack在dev模式下编译时，若遇到无法解析的文件或代码死循环，会卡在编译阶段，导致dev server无法完成启动。
• 共享依赖的singleton配置冲突：CRA的dev环境本身对react、react-dom等核心依赖有特殊打包逻辑，强制设置singleton: true可能触发Webpack的单例依赖校验，导致依赖解析时陷入循环等待。可暂时将singleton改为false，测试dev server是否能正常启动。
• Dev Server监听规则不合理：从打印的serverConfig来看，watch.ignored的正则表达式可能未正确忽略node_modules目录，导致dev server监听大量无关文件，引发编译阻塞。可简化规则为ignored: /node_modules/后重试。
• Module Federation与CRA Dev入口不兼容：CRA的dev模式集成了react-refresh热更新等功能，入口结构与生产环境不同。直接添加ModuleFederationPlugin可能破坏原有入口逻辑，导致Webpack无法生成dev server所需的bundle。可尝试在ModuleFederationPlugin中添加filename: 'remoteEntry.js'参数，明确指定远程入口文件路径。

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