使用React 19与RsPack时ReactRefreshPlugin报错求助

问题重现步骤 #

• 创建Nx工作区：

  pnpm create nx-workspace@latest
  

  按提示选择无框架React项目
• 升级至React 19预览版：

  pnpm add -w react@canary react-dom@canary
  

• 创建微前端Host与远程应用：

  pnpm nx g @nx/react:host apps/shell --remotes=remote1 --bundler=rspack
  

• 执行启动命令pnpm nx run shell:serve时触发错误：

  [rspack-cli] TypeError: ReactRefreshPlugin is not a constructor
      at addHotReload (/Users/arnc/Sites/unicaja-mfe/node_modules/.pnpm/@nx+rspack@20.8.0_bjoay5jt52eeq24olo52gcaise/node_modules/@nx/rspack/src/plugins/utils/apply-react-config.js:43:29)
      at applyReactConfig (/Users/arnc/Sites/unicaja-mfe/node_modules/.pnpm/@nx+rspack@20.8.0_bjoay5jt52eeq24olo52gcaise/node_modules/@nx/rspack/src/plugins/utils/apply-react-config.js:7:5)
      at NxReactRspackPlugin.apply (/Users/arnc/Sites/unicaja-mfe/node_modules/.pnpm/@nx+rspack@20.8.0_bjoay5jt52eeq24olo52gcaise/node_modules/@nx/rspack/src/plugins/nx-react-rspack-plugin/nx-react-rspack-plugin.js:10:51)
      at createCompiler (/Users/arnc/Sites/unicaja-mfe/node_modules/.pnpm/@rspack+core@1.2.2_@swc+helpers@0.5.13/node_modules/@rspack/core/dist/index.js:20466:17)
      at create3 (/Users/arnc/Sites/unicaja-mfe/node_modules/.pnpm/@rspack+core@1.2.2_@swc+helpers@0.5.13/node_modules/@rspack/core/dist/index.js:20499:22)
      at rspack2 (/Users/arnc/Sites/unicaja-mfe/node_modules/.pnpm/@rspack+core@1.2.2_@swc+helpers@0.5.13/node_modules/@rspack/core/dist/index.js:20522:41)
      at RspackCLI.createCompiler (/Users/arnc/Sites/unicaja-mfe/node_modules/.pnpm/@rspack+cli@1.2.2_@rspack+core@1.2.2_@swc+helpers@0.5.13__@types+express@4.17.21_webpack@5.99_wdepvecbgpq3bz6roij2u7maam/node_modules/@rspack/cli/dist/index.js:587:41)
      at async Object.handler (/Users/arnc/Sites/unicaja-mfe/node_modules/.pnpm/@rspack+cli@1.2.2_@rspack+core@1.2.2_@swc+helpers@0.5.13__@types+express@4.17.21_webpack@5.99_wdepvecbgpq3bz6roij2u7maam/node_modules/@rspack/cli/dist/index.js:423:30)
  

解决思路 #

• 版本兼容性适配：React 19（canary版）调整了热刷新相关API，当前@nx/rspack@20.8.0插件的热刷新逻辑未适配新API，导致构造函数调用失败。
• 临时禁用热刷新：修改apps/shell/rspack.config.ts，在devServer配置中关闭热重载：

  export default defineConfig({
    // ...其他配置
    devServer: {
      hot: false, // 关闭热刷新
      // ...其他devServer配置
    },
  });
  

• 降级React版本：若无需React 19特性，暂时回退到稳定版：

  pnpm add -w react@^18 react-dom@^18
  

• 升级Nx插件：检查Nx是否有适配React 19的更新版本，执行升级命令：

  pnpm nx migrate latest
  pnpm install
  pnpm nx migrate --run-migrations
  

• 手动替换热刷新逻辑：保留React 19的前提下，手动修改rspack配置，使用RsPack官方原生的React热刷新支持，替换Nx插件封装的逻辑。

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