Electron.js/Parcel 错误：fs.existsSync 不是 function

Question

我正在使用电子/包裹样板electron-react-parcel-boilerplate ，它开箱即用。

但是，当使用redux-beacon-electron package 时，我在 electron JS 控制台中收到以下错误：

Uncaught TypeError: fs.existsSync is not a function
    at getElectronPath (index.js:7)
    at Object.parcelRequire.node_modules/electron/index.js.fs (index.js:18)
    at newRequire (src.a2b27638.js:47)
    at localRequire (src.a2b27638.js:53)
    at Object.parcelRequire.node_modules/electron-ga/lib/side-effects.js.electron (side-effects.ts:1)
    at newRequire (src.a2b27638.js:47)
    at localRequire (src.a2b27638.js:53)
    at Object.parcelRequire.node_modules/electron-ga/lib/helpers.js.qs (helpers.ts:4)
    at newRequire (src.a2b27638.js:47)
    at localRequire (src.a2b27638.js:53)

在我们运行yarn start的终端：

[0] ⚠️  /Users/nyxynyx/electron-app/node_modules/electron/index.js:8:41: Cannot statically evaluate fs argument
[0]    6 | function getElectronPath () {
[0]    7 |   if (fs.existsSync(pathFile)) {
[0] >  8 |     var executablePath = fs.readFileSync(pathFile, 'utf-8')
[0]      |                                         ^
[0]    9 |     if (process.env.ELECTRON_OVERRIDE_DIST_PATH) {
[0]   10 |       return path.join(process.env.ELECTRON_OVERRIDE_DIST_PATH, executablePath)
[0]   11 |     }

我的直觉是 Parcel 在使用yarn start时没有正确定位 Electron ，所以我尝试更改

"react-start": "parcel -p 3000 index.html --out-dir build",

至

"react-start": "parcel -p 3000 index.html --out-dir build --target node",

和

"react-start": "parcel -p 3000 index.html --out-dir build --target electron",

但是现在 Electron 应用程序甚至不会在运行yarn start时启动，并且在运行yarn start或yarn react-start后尝试加载http://localhost:3000时什么也没有出现。

为什么它不起作用，是否可以解决此错误？

谢谢！

---

GitHub 回购

https://github.com/nyxynyx/electron-react-parcel-boilerplate-problem

---

使用

• 反应-dom@16.13.1
• react-redux@7.2.0
• 反应@16.13.1
• redux-beacon-electron@1.0.1
• redux@4.0.5
• 电子@8.2.3
• parcel-bundler@1.12.4

包。json

{
  "name": "electron-react-parcel",
  "version": "1.0.0",
  "description": "Electron app build using ReactJS and Parcel web application bundler",
  "main": "src/electron.js",
  "scripts": {
    "react-start": "parcel -p 3000 index.html --out-dir build",
    "react-build": "parcel build index.html --out-dir build --public-url ./",
    "electron-build": "electron-builder -mwl",
    "clean-build": "rm -rf build/ .cache dist/",
    "build": "yarn clean-build && yarn react-build && yarn electron-build",
    "start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron . \"",

...

---

nodeIntegration: true

尝试按照@tpikachu 的建议设置为true ，但同样的错误仍然存在......

electron.js （通常命名为main.js ）

function createWindow() {
  const { width, height } = electron.screen.getPrimaryDisplay().workAreaSize;
  mainWindow = new BrowserWindow({
    width: Math.round(width * 0.9),
    height: Math.round(height * 0.9),
    webPreferences: {
      nodeIntegration: true,
    }
  });

  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
  mainWindow.on("closed", () => (mainWindow = null));
}


app.on("ready", async () => {
  createWindow();

  ...

});

Answer 1

由于 package 版本的冲突。 比如electron-ga@1.0.6 has electron@^1.8.2

即使我们使用 electron-ga@1.0.6 修复 package 冲突也不会稳定并且不适合最新的 electron 版本。

我们可以使用electron-google-analytics而不是electron-ga