如何解决react-app-rewired保存时应用冻结的问题？

问题背景 #

开发环境下编辑内容后应用直接冻结，必须手动刷新才能恢复；设置FAST_REFRESH=false后虽能自动刷新，但会整页重载，无法实现Vite或纯React那样的无刷新热更新效果。当前脚本配置如下：

"scripts": {
    "dev": "FAST_REFRESH=false react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired --env=jsdom",
    "less": "lessc --js src/styles/wieldy.less public/css/style.css && lessc --js src/styles/wieldy.less public/css/style.min.css --compress -x"
},

解决方案 #

1. 恢复Fast Refresh并排查冲突 #

先移除FAST_REFRESH=false，回到默认Fast Refresh配置，排查冻结根源：

• 检查项目中自定义HOC、全局状态管理代码是否存在副作用，比如组件渲染时修改全局状态、订阅未正确清理等，这类代码易导致Fast Refresh失效冻结。
• 更新react-app-rewired和react-scripts到最新稳定版：

  npm update react-app-rewired react-scripts
  

2. 配置react-app-rewired支持无刷新热更新 #

若必须使用react-app-rewired，需确保热更新配置正确：

• 项目根目录创建config-overrides.js，添加Fast Refresh兼容配置：

  const { override, addBabelPlugin } = require('customize-cra');
  
  module.exports = override(
    addBabelPlugin('react-refresh/babel')
  );
  

• 安装必要依赖：

  npm install -D react-refresh customize-cra
  

• 修改dev脚本，移除FAST_REFRESH=false：

  "dev": "react-app-rewired start"
  

3. 修复Less编译与热更新的冲突 #

手动编译Less到public目录会干扰React样式热更新逻辑，改用webpack集成处理：

1. 安装依赖：

   npm install -D less less-loader
   

2. 更新config-overrides.js添加Less配置：

   const { override, addBabelPlugin, addLessLoader } = require('customize-cra');
   
   module.exports = override(
     addBabelPlugin('react-refresh/babel'),
     addLessLoader({
       lessOptions: {
         javascriptEnabled: true,
       }
     })
   );
   

3. 在组件中直接导入Less文件，替代手动编译：

   import '../styles/wieldy.less';
   

4. 移除less脚本，让webpack自动处理样式编译与热更新。

4. 排查全局错误边界影响 #

若项目有全局错误边界组件，临时注释后测试热更新是否正常，确认其未在热更新时捕获错误导致应用挂起。

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