React 19升级后模块联邦+Webpack开发环境act(...)配置错误求助

问题根源 #

React 19对开发环境的渲染校验逻辑做了强化，Module Federation的跨模块加载机制或Webpack热更新流程，可能触发了未被act(...)包裹的组件更新，进而抛出该错误。

具体解决方案 #

• 适配React 19的热更新依赖
  升级@pmmmwh/react-refresh-webpack-plugin和react-refresh到支持React 19的最新版本，同时确保Webpack devServer正确启用热更新：

  const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
  
  module.exports = {
    // ...其他配置
    devServer: {
      hot: true,
      open: true
    },
    plugins: [
      process.env.NODE_ENV === 'development' && new ReactRefreshWebpackPlugin()
    ].filter(Boolean)
  };
  

• 正确全局注入IS_REACT_ACT_ENVIRONMENT
  在Webpack开发环境配置中通过DefinePlugin注入该变量，让React 19识别当前开发环境支持act校验：

  const webpack = require('webpack');
  
  module.exports = {
    // ...其他配置
    plugins: [
      new webpack.DefinePlugin({
        IS_REACT_ACT_ENVIRONMENT: JSON.stringify(true)
      })
    ]
  };
  

  注意：仅在development模式下配置该变量，避免影响生产环境。

• 规范微前端组件加载流程
  宿主应用加载微前端模块时，用React.lazy和Suspense包裹，确保异步加载的组件被React渲染流程正确处理：

  const MicroApp = React.lazy(() => import('microApp/Component'));
  
  function HostApp() {
    return (
      <React.Suspense fallback={<div>Loading...</div>}>
        <MicroApp />
      </React.Suspense>
    );
  }
  

• 升级Module Federation及Webpack依赖
  将webpack、webpack-dev-server、@module-federation/core升级到最新稳定版，解决React 19与Module Federation的兼容性问题。

• 排查第三方库的潜在干扰
  临时移除项目中的第三方UI库、状态管理库等，逐步排查是否有库在开发环境中触发了未被act包裹的DOM更新或状态变更。

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