Windows WSL(Ubuntu)环境下React App编码时无法热更新问题求助

针对你用create-react-app开发AirBnB克隆项目时遇到的热更新失效问题，结合你的package.json配置，给出以下排查和解决步骤：

1. 基础缓存与依赖重置 #

• 停止当前服务，删除项目根目录下的node_modules文件夹和package-lock.json文件
• 执行npm cache clean --force清除npm缓存
• 重新安装依赖：npm install
• 重启服务：npm start

2. 检查文件与目录问题 #

• 确保所有组件文件命名没有使用大写字母（Windows系统下文件系统不区分大小写，可能导致热更新监听失效）
• 不要修改public目录下的文件，create-react-app不会对该目录内的文件触发热更新，如需修改需重启服务

3. 调整代理配置 #

你的package.json中配置了proxy: "http://localhost:8000"，默认代理可能和热更新的WebSocket连接冲突：

• 先注释掉proxy这一行，重启服务测试热更新是否恢复
• 如果恢复正常，改用http-proxy-middleware手动配置代理：
  1. 安装依赖：npm install http-proxy-middleware --save-dev
  2. 在src目录下创建setupProxy.js文件，添加以下内容：

     const { createProxyMiddleware } = require('http-proxy-middleware');
     
     module.exports = function(app) {
       app.use(
         '/api', // 替换成你需要代理的路径前缀
         createProxyMiddleware({
           target: 'http://localhost:8000',
           changeOrigin: true,
         })
       );
     };
     

  3. 重启服务即可

4. 升级react-scripts版本 #

你当前使用的react-scripts: 5.0.1存在部分已知的热更新bug，升级到最新稳定版：

npm install react-scripts@latest

5. 浏览器与系统层面排查 #

• 打开浏览器开发者工具，勾选「Disable cache」选项，避免浏览器缓存旧内容
• 禁用浏览器的广告拦截、隐私类插件，这类插件可能阻止热更新的WebSocket连接
• 如果你使用Linux/macOS，执行以下命令提升系统文件监听上限，避免因文件过多导致监听失效：

  echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
  

6. 验证项目初始化环境 #

如果以上步骤都无效，建议初始化一个全新的create-react-app项目：

npx create-react-app test-hmr
cd test-hmr
npm start

修改src/App.js测试热更新是否正常，如果正常，说明你的项目中存在自定义代码或配置干扰热更新，可逐步迁移代码排查问题

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