Electron.js/Parcel 错误：fs.existsSync 不是函数答案

【问题标题】：Electron.js/Parcel Error: fs.existsSync is not a functionElectron.js/Parcel 错误：fs.existsSync 不是函数
【发布时间】：2020-08-12 23:05:11
【问题描述】：

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

但是，当使用 redux-beacon-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

使用

react-dom@16.13.1
react-redux@7.2.0
react@16.13.1
redux-beacon-electron@1.0.1
redux@4.0.5
electron@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();

  ...

});

【问题讨论】：

你在哪里使用这个节点模块，redux-beacon-electron？渲染器或主
@tpikachu 在渲染器中，有一个 React/Redux 应用程序。
那么请在创建BrowserWindow时启用nodeIntegration标志
点赞stackoverflow.com/questions/60400263/…
你可以用这个electron-google-analytics而不是electron-ga

标签： javascript node.js reactjs electron parceljs

【解决方案1】：

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

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

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

【讨论】：