如何解决CRA创建应用的热更新失败（ERR_INTERNET_DISCONNECTED）问题？

可能的原因与修复步骤 #

1. 检查本地代理设置 #

• 关闭全局代理工具（VPN、代理软件等），这类工具可能拦截localhost请求，导致热更新JSON文件无法加载。
• 若必须使用代理，在系统代理设置中将localhost和127.0.0.1添加到代理例外列表。

2. 清除缓存并重启服务 #

• 停止本地开发服务器（按Ctrl+C），删除项目根目录下的node_modules/.cache文件夹（CRA的缓存目录）。
• 可选：重新安装依赖（缓存损坏时可能需要）：

  npm install
  

• 重启开发服务器：

  npm start
  

3. 检查hosts文件配置 #

• 打开系统hosts文件：Windows路径为C:\Windows\System32\drivers\etc\hosts，Mac/Linux路径为/etc/hosts，确保存在以下配置：

  127.0.0.1       localhost
  ::1             localhost
  

• 若有异常条目（如localhost指向其他IP），修改后保存，再刷新DNS：Windows执行ipconfig /flushdns，Mac/Linux执行sudo dscacheutil -flushcache。

4. 禁用浏览器插件 #

• 暂时关闭广告拦截、隐私保护类浏览器插件，这类插件可能误拦截热更新请求。
• 尝试用浏览器无痕模式打开项目，验证热更新是否正常。

5. 升级react-scripts版本 #

• 若项目依赖长期未更新，旧版本CRA可能存在HMR Bug，执行以下命令升级：

  npm install react-scripts@latest
  

• 升级后重启开发服务器，检查问题是否解决。

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