React项目控制台持续报错“WebSocket connection to failed”求助

1. 开发服务器配置检查 #

• 查看react-scripts版本：执行 npm list react-scripts，若版本低于5.x，升级到最新版：npm install react-scripts@latest
• 检查项目根目录的.env文件：如果存在WDS_SOCKET_PORT、WDS_SOCKET_HOST这类自定义配置，删除后重启项目，避免配置冲突导致WebSocket连接异常

2. 本地端口与网络排查 #

• 确认3000端口是否被占用：Mac终端执行 lsof -i :3000，若输出进程信息，执行 kill -9 <PID>（替换<PID>为对应进程ID）杀掉占用进程，再重启项目
• 切换端口启动：执行 PORT=3001 npm start，用3001端口测试是否仍出现错误，排除端口本身的问题

3. 浏览器环境排查 #

• 使用浏览器隐私模式（无痕窗口）打开项目，排除第三方浏览器扩展的干扰
• 清空浏览器缓存：清除所有缓存数据后，重启浏览器再访问项目

4. 项目依赖与缓存清理 #

• 删除依赖目录与锁文件：执行 rm -rf node_modules package-lock.json yarn.lock，然后重新安装依赖：npm install
• 清除npm缓存：执行 npm cache clean --force，再重新安装依赖并启动项目

5. VSC环境排查 #

• 完全重启VSC：退出VSC后重新打开，再通过终端启动项目，避免VSC进程残留问题
• 禁用所有VSC扩展：临时禁用全部扩展后测试，排除扩展后台进程的干扰

内容的提问来源于stack exchange，提问作者Giacomo Greco - Sonar