在app.asar中找不到模块 Electron.js

Question

我正在尝试用 Electron 打包我的 React 应用程序（第一次）。运行开发版本时一切都很好。我将其打包并创建了 dist 文件，没有记录任何错误。

但是，当我尝试打开 app.exe 文件以确保一切正常时，我收到此错误：

Cannot find module C:\Users\user\Desktop\app\dist\win-unpacked\resources\app.asar\...\electron.js

我的应用程序中的任何位置都没有 electron.js 文件，甚至没有提及（我已经检查过）。对于电子打包，我只创建了一个main.js和一个preload.js，就像网站指南一样（并更新了package.json文件）。 所以我相信错误并不是直接来自我的代码。

一切都是最新的（节点、npm、电子和电子构建器）。

任何人都知道如何排除/解决此错误吗？

main.js

const { app, BrowserWindow } = require("electron");
const path = require("node:path");

function createWindow() {
  const win = new BrowserWindow({
    width: 580,
    height: 580,
    webPreferences: {
      preload: path.join(app.getAppPath(), "preload.js"),
    },
  });

  win.loadFile(path.join(__dirname, "build", "index.html"));
}

app.whenReady().then(createWindow);

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

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

preaload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

package.json 调整

{

 (...)

 "main": "main.js",

 (...)

 "scripts": {

    (...)

    "electron": "electron .",
    "dev": "concurrently \"npm run start\" \"npm run electron\"",
    "package": "electron-builder"
  }

  (...)

  "build": {
    "appId": "com.name.app",
    "files": [
      "build/**/*",
      "preload.js",
      "main.js"
    ],
    "win": {
      "target": [
        "nsis"
      ],
      "publisherName": "name"
    }
  },
  "devDependencies": {
    "electron-builder": "^25.0.5"
  }
}

我还没有做任何事情来尝试解决它，因为我不知道它来自哪里。

Answer 1

您收到此错误是因为您使用 CRA 创建了应用程序，并且 Electron-builder 有一个 内置预设，在检测

react-scripts

时默认情况下会应用该预设：

延长？

optional

延伸：

null

|

string

|

string[]

内置配置预设的名称（目前仅支持

react-cra

）或任意数量的配置文件路径（相对于项目目录）。

后者允许混合来自多个其他配置的配置，就像您

Object.assign

它们一样，但正确组合

files

全局模式。

如果应用程序依赖项中有

react-scripts

，则会自动设置

react-cra

。设置为

null

可禁用自动检测。

此预设要求您的条目文件命名为

electron.js

并在打包时位于

build

文件夹中。

您可以决定遵循预期的文件结构，也可以使用配置上的

extends

选项禁用预设：

"build": {
+ "extends": null,
  // ...
}

---

郑重声明，当检测到预设并且您没有预期的文件时，打包步骤通常会失败并出现以下错误：

Application entry file "build/electron.js" in the "xxx" does not exist. Seems like a wrong configuration.

我不确定你的为什么通过了。