Search code examples
javascriptnode.jsreactjselectronparceljs

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

I am using the Electron/Parcel boilerplate electron-react-parcel-boilerplate which works great out of the box.

However, when using the redux-beacon-electron package, I am getting the following error in the electron JS console:

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)

and in the terminal where we run 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 |     }

enter image description here

My gut feeling is that Parcel was not properly targeting Electron when starting it using yarn start, so I tried changing

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

to 

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

and

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

but now the Electron app does not even launch on running yarn start, and nothing appears when trying to load http://localhost:3000 either after running yarn start or yarn react-start.

Why is it not working and is it possible to solve this error?

Thank you!

GitHub Repo

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

Using

  • 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

Tried setting to true as suggested by @tpikachu, but the same error persists...

electron.js (usually named 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();

  ...

});
Solution

  • Due to conflicts of package versions. Such as electron-ga@1.0.6 has electron@^1.8.2

    Even we fix the package conflicts using electron-ga@1.0.6 won't be stable and not fit for the latest electron version.

    We can use electron-google-analytics rather than electron-ga