Electron.js/Parcel Error: fs.existsSync is not a function

Question

我正在使用 Electron/Parcel 样板 electron-react-parcel-boilerplate，开箱即用。

但是，当使用 redux-beacon-electron 包时，我在 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 应用程序甚至不会在运行ning yarn start 启动，并且在运行ning [=19] 之后尝试加载 http://localhost:3000 时什么也没有出现=] 或 yarn react-start.

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

谢谢！

GitHub回购

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

使用

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

packages.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

由于软件包版本冲突。比如electron-ga@1.0.6 has electron@^1.8.2

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

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

Electron.js/Parcel Error: fs.existsSync is not a function

Electron.js/Parcel Error: fs.existsSync is not a function

javascript

node.js

reactjs

electron

parceljs

`nodeIntegration: true`