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