React删除样板文件后修改组件开发服务器未自动刷新求助

你遇到的情况本质是热更新的通信链路被完全打断——Webpack开发服务器（WDS）其实能检测到你的文件修改，但因为你删掉了脚手架自带的样板接入代码，前端页面根本接收不到WDS推送的更新信号，所以才会一直停在[HMR] Waiting for update signal from WDS...的状态，必须手动刷新才能拿到新代码。
可落地的排查修复步骤如下：

• 补全入口文件的HMR监听逻辑
  你删除样板文件时，最容易漏掉的就是入口文件中的热更新挂载代码。在你的src/index.js最末尾，补上开发环境下的监听逻辑：

  if (process.env.NODE_ENV === 'development' && module.hot) {
    module.hot.accept();
  }
  

  保存后重启开发服务器，再修改组件文本测试，观察控制台是否能跳出[HMR] Updated modules的输出。
  这里需要避坑：不要把root.render(<你的组件/>)这类根渲染代码包在setTimeout、异步请求回调这类异步逻辑里，否则HMR会因为找不到挂载的应用节点直接失效。
• 强制开启WDS的文件轮询检测
  如果你是在WSL、虚拟机共享文件夹、Linux系统下跑的项目，很容易因为系统文件监听的句柄数限制，导致WDS根本感知不到文件修改。在项目根目录新建.env文件，写入：

  CHOKIDAR_USEPOLLING=true
  

  保存后重启开发服务器即可。
• 排查react-scripts版本匹配问题
  如果你是用Create React App搭建的项目，不要随意修改或卸载自带的react-scripts依赖。可以执行npm ls react-scripts确认版本是否为初始安装的稳定版本，出现版本不匹配的情况直接重装对应版本的依赖即可，不要随意使用eject暴露出来的自定义webpack配置删改热更新相关的配置项。
• 排除浏览器缓存干扰
  打开浏览器开发者工具的Network面板，勾选Disable cache选项，保持开发者工具处于打开状态再修改代码测试，避免浏览器缓存了旧的模块文件导致看起来像是热更新失效。

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