Electron+React启动异常：wait-on卡在localhost:3000无法启动Electron

问题描述 #

我正在尝试将Electron与React结合开发，对应的package.json配置如下：

{
"name": "loader",
"version": "0.1.0",
"private": true,
"dependencies": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.3.0",
  "@testing-library/user-event": "^13.5.0",
  "cross-env": "^7.0.3",
  "electron-is-dev": "^2.0.0",
  "react": "^18.2.0",
  "react-countup": "^6.3.1",
  "react-dom": "^18.2.0",
  "react-icons": "^4.4.0",
  "react-idle-timer": "^5.4.2",
  "react-loader-spinner": "^5.3.3",
  "react-rnd": "^10.3.7",
  "react-router-dom": "^6.4.0",
  "react-scripts": "5.0.1",
  "react-spring": "^9.5.3",
  "styled-components": "^5.3.5",
  "web-vitals": "^2.1.4"
},
"main": "public/main.js",
"homepage": "./",
"scripts": {
  "react-start": "react-scripts start",
  "react-build": "react-scripts build",
  "react-test": "react-scripts test --env=jsdom",
  "react-eject": "react-scripts eject",
  "electron-build": "electron-builder",
  "release": "yarn react-build && electron-builder --publish=always",
  "build": "yarn react-build && yarn electron-build",
  "start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000/ && electron .\""
},
"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
},
"devDependencies": {
  "concurrently": "^7.5.0",
  "electron": "^21.2.3",
  "electron-builder": "^23.6.0",
  "wait-on": "^6.0.1"
}
}

配置中使用concurrently同时执行React启动命令，以及等待localhost:3000可用后启动Electron的命令。但执行yarn start时，即使React服务已在localhost:3000正常运行，wait-on仍卡住无法继续执行，导致Electron始终无法启动；若移除wait-on，所有命令均可正常执行，包括Electron的启动。

解决方案 #

• 改用TCP端口监听：React dev server启动后，HTTP响应可能不符合wait-on默认检查逻辑，直接监听端口更可靠。修改start命令中的wait-on部分为：

  wait-on tcp:3000 && electron .
  

• 延长等待超时时间：给wait-on增加超时和重试参数，适配dev server启动后的稳定时间：

  wait-on --interval 1000 --timeout 15000 http://localhost:3000 && electron .
  

• 替换localhost为127.0.0.1：若React dev server绑定地址存在解析问题，尝试直接使用IP地址：

  wait-on http://127.0.0.1:3000 && electron .
  

• 调整脚本执行顺序：改用后台启动React，再执行wait-on和Electron，避免concurrently的并行执行冲突：

  "start": "cross-env BROWSER=none yarn react-start & wait-on http://localhost:3000 && electron ."
  

• 调整wait-on版本：部分版本存在兼容性问题，尝试升级或降级：

  # 升级到最新版
  yarn add wait-on@latest --dev
  # 或降级到稳定版本
  yarn add wait-on@5.3.0 --dev
  

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