Electron运行React应用遇800A03EA及whenReady未定义错误求助

问题描述 #

尝试用Electron运行React应用，按教程配置package.json的scripts字段后，触发800A03EA JScript编译错误；给electron命令添加node前缀后，又出现TypeError: Cannot read property 'whenReady' of undefined错误，附上相关配置与代码寻求解决办法。

初始scripts配置 #

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "electron ."
  },

修改后的scripts配置 #

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "node electron ."
  },

我的electron.js代码 #

const { app, BrowserWindow } = require("electron");
const path = require("path");
const express = require("express");
const cors = require("cors");
const localServerApp = express();
const PORT = 8088;
const startLocalServer = (done) => {
  localServerApp.use(express.json({ limit: "100mb" }));
  localServerApp.use(cors());
  localServerApp.use(express.static('./build/'));
  localServerApp.listen(PORT, async () => {
    console.log("Server Started on PORT ", PORT);
    done();
  });
};

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  mainWindow.loadURL("http://localhost:" + PORT);
}

app.whenReady().then(() => {
  startLocalServer(createWindow);

  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

错误原因与解决办法 #

1. 800A03EA JScript编译错误 #

原因：Windows系统下，系统错误地将electron.cmd识别为JScript脚本执行，通常是因为全局Electron未正确安装，或者本地项目未安装Electron，导致调用了系统其他同名脚本。
解决：

• 先确保本地项目安装Electron依赖：

  npm install electron --save-dev
  

• 修改scripts里的electron命令，使用本地项目的Electron：

  "electron": "npx electron ."
  

  或者直接指定本地路径：

  // Windows
  "electron": ".\\node_modules\\.bin\\electron.cmd ."
  // macOS/Linux
  "electron": "./node_modules/.bin/electron ."
  

2. TypeError: Cannot read property 'whenReady' of undefined #

原因：用node electron .命令是直接用Node.js运行electron.js，但Node.js环境中没有Electron提供的app模块，Electron主进程代码必须通过Electron CLI启动，不能用node命令直接执行。
解决：放弃在electron命令前加node前缀，采用上面第一种错误的解决方法，用正确的方式调用Electron CLI。

额外注意事项 #

• 运行Electron前，必须先执行npm run build生成React的build目录，否则express静态服务找不到文件；
• 如果没有preload.js文件，要么创建一个空的preload.js，要么删除webPreferences里的preload配置，避免启动报错。

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