React+Electron项目中wait-on无法执行后续命令的问题

排查步骤与修复方案 #

1. 确认React开发服务器端口 #

先单独运行npm start，查看终端输出的实际端口（比如3000被占用时会自动切换到3001）。如果端口不是3000，修改electron:start中的wait-on目标，比如改成tcp:3001。

2. 替换wait-on监听方式 #

有时候端口开放了但React服务还未完全就绪，导致wait-on卡住。把electron:start改成监听HTTP请求而非单纯端口：

"electron:start": "wait-on http://localhost:3000 && electron ."

3. 修正concurrently的引号格式 #

Windows系统下双引号嵌套可能导致命令解析错误，换成单引号包裹内部命令：

"electron:serve": "concurrently -k 'cross-env BROWSER=none npm start' 'npm run electron:start'"

Linux/macOS环境下可保持原双引号配置，但如果仍有问题，也可尝试单引号格式。

4. 锁定依赖版本 #

两个月前能正常运行，大概率是依赖版本更新导致兼容性问题。找到旧电脑上的package-lock.json，锁定concurrently、wait-on、cross-env的版本，比如安装指定版本：

npm install concurrently@7.6.0 wait-on@6.0.1 cross-env@7.0.3

（版本号需根据旧项目的lock文件实际值调整）

5. 调试wait-on命令 #

单独测试wait-on是否能正常检测到服务：

• 先启动React服务：npm start
• 新开终端运行：wait-on http://localhost:3000
  如果命令能正常退出（无报错，终端返回），说明wait-on没问题；如果卡住，检查本地防火墙、代理是否阻止了本地请求，或React服务是否真的在该端口响应。

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