Parcel: "fs.existsSync is not a function" & "Cannot statically evaluate fs argument"

[nyxynyx]

🐛 bug report

Getting the errors fs.existsSync is not a function and Cannot statically evaluate fs argument" when running an app based on electron-react-parcel-boilerplate and using redux-beacon-electron

🎛 Configuration (.babelrc, package.json, cli command)

CLI Command: yarn start

package.json

{
    "name": "electron-app",
    "version": "0.0.1",
    "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",
      "electron-publish": "GH_TOKEN=mysecrettoken electron-builder -mwl --publish=always",
      "clean-build": "rm -rf build/ .cache dist/",
      "build": "yarn clean-build && yarn react-build && yarn electron-build",
      "release": "yarn clean-build && yarn react-build && yarn electron-publish",
      "start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron . \"",
      "test-bundle": "bundlesize"
    },

...


    "dependencies": {
      "@fortawesome/fontawesome-svg-core": "^1.2.28",
      "@fortawesome/free-solid-svg-icons": "^5.13.0",
      "@fortawesome/react-fontawesome": "^0.1.9",
      "autoscroll-react": "^3.2.0",
      "axios": "^0.19.2",
      "bootstrap": "^4.4.1",
      "connected-react-router": "^6.8.0",
      "electron-is-dev": "1.2.0",
      "history": "^4.10.1",
      "immutable": "^3.8.1 || ^4.0.0-rc.1",
      "lodash": "^4.17.15",
      "moment": "^2.24.0",
      "normalize.css": "^8.0.1",
      "prop-types": "^15.7.2",
      "react": "^15.6.0 || ^16.0.0",
      "react-bootstrap": "^1.0.0",
      "react-country-region-selector": "^2.1.0",
      "react-dom": "^16.13.1",
      "react-identicons": "^1.2.4",
      "react-infinite-scroller": "^1.2.4",
      "react-loader-spinner": "^3.1.14",
      "react-moment": "^0.9.7",
      "react-particles-js": "^3.0.3",
      "react-redux": "^7.2.0",
      "react-router": "^5.1.2",
      "react-router-dom": "^5.1.2",
      "redux": "^4.0.5",
      "redux-actions": "^2.6.5",
      "redux-beacon-electron": "^1.0.1",
      "redux-localstorage": "^0.4.1",
      "redux-thunk": "^2.3.0",
      "reset-css": "^5.0.1",
      "seamless-immutable": "^7.1.3",
      "semantic-ui-css": "2.4.1",
      "socket.io-client": "^2.3.0"
    },
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-plugin-transform-class-properties": "^6.24.1",
      "babel-plugin-transform-object-rest-spread": "^6.26.0",
      "babel-plugin-transform-react-jsx": "^6.24.1",
      "babel-preset-env": "^1.7.0",
      "babel-preset-react": "^6.24.1",
      "bundlesize": "^0.18.0",
      "concurrently": "^5.0.2",
      "cross-env": "7.0.2",
      "electron": "^8.2.3",
      "electron-builder": "^22.5.1",
      "electron-devtools-installer": "^3.0.0",
      "parcel-bundler": "^1.12.4",
      "wait-on": "4.0.2"
    }
  }

🤔 Expected Behavior

The electron should load with no errors.

😯 Current Behavior

When starting the Electron app based on the electron-react-parcel-boilerplate and using redux-beacon-electron, an error appears in the Electron JS console:

src.a2b27638.js:116 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 an error appears in the Terminal where yarn start was run:

⚠️  Could not load source file "../src/index.ts" in source map of "node_modules/electron-ga/lib/index.js".
[0] ⚠️  Could not load source file "../src/consts.ts" in source map of "node_modules/electron-ga/lib/consts.js".
[0] ⚠️  Could not load source file "../src/side-effects.ts" in source map of "node_modules/electron-ga/lib/side-effects.js".
[0] ⚠️  Could not load source file "../src/helpers.ts" in source map of "node_modules/electron-ga/lib/helpers.js".
[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 |     }
[0] ✨  Built in 3.38s.

💁 Possible Solution

🔦 Context

Attempt 1

Thinking that this may be solved by specifying the node or electron target, I ran yarn start again after modifying the yarn run script from

"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 things appear to be worse. The electron app no longer pops up after building, and nothing is listening to localhost:3000, so react server probably didnt start.

Attempt 2

Tried setting nodeIntegration: true when creating BrowserWindow, but nothing changed.

Part of 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));
}

💻 Code Sample

GITHUB REPO:

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

Adding the following code to my redux store file store.js will cause the mentioned errors to appear:

import { 
  createElectronGoogleAnalyticsTarget, 
  actionMetaEventMapper as eventsMapper
} from 'redux-beacon-electron'

const electronTarget = createElectronGoogleAnalyticsTarget({ua: 'UA-XXXX'})
const gaMiddleware = createMiddleware(eventsMapper, electronTarget)

Reference: redux-beacon-electron README.md

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.4
| Node | v13.7.0
| npm/Yarn | 1.22.4
| Operating System | Mac OS X Catalina 10.15.3

[mischnic]

--target electron should work here (not shim the fs module).

[nyxynyx]

@mischnic Tried using --target electron:

% parcel -p 3000 index.html --out-dir build --target electron
✨  Built in 4.58s.

but it is stuck at this stage and never returns the line:

Server running at http://localhost:3000

Is there something wrong with the syntax used? Any way to increase the verbosity of this command to have a better glimpse of what may have gone wrong?

[mischnic]

Turns out that the dev server is not started with --target electron...

https://github.com/parcel-bundler/parcel/blob/d3e9d8093c0d5848d1a01469ffa9f0ff77b604e4/packages/core/parcel-bundler/src/cli.js#L239-L241

[nyxynyx]

@mischnic That makes sense now!

From cli.js I cannot figure out how to start the server when using --target electron. Is it possible to do this? Thanks!

[Achder]

I have the exact same issue and would be very happy if somebody could help.

[vertangelx]

@mischnic @nyxynyx @Achder I have the same issue as you guys too!

Any solution to this problem so far?

[sketchbuch]

I would also like to know the solution, --target electron stops the server being started

[Achder]

I switched to electron-webpack.

[55Cancri]

I am in the same position as everyone else here. --target electron prevents server from starting and the electron app never opens. It will build successfully, but when I open the generated dmg file, its just a white blank page. Any help would be appreciated.

[sketchbuch]

I managed to get a working version (without --target electron)

https://github.com/sketchbuch/electron-parcel-react-typescript

I'm using that repo now as the basis of a new elctron app. I had to create a type for the FS functions I wanted exposed in the renderer (via preload script).

[beautyfree]

Same for me

[beautyfree]

@sketchbuch your boilerplate doesn't fix problem.
just tried to import electron in react app

[sketchbuch]

It fixed my issue which was accessing fs in the renderer. My needs are quite simple - I only need access to FS functions as I use electron as a wrapper for a web app - I'm not making something as complex as atom.

Did you try exposing the ipcrenderer in preload.js and adding a type??? Apparently you shouldn't do this anyway, but you can. What may be better is using context bridge in the preload script.

https://www.electronjs.org/docs/api/context-bridge

See https://stackoverflow.com/questions/45148110/how-to-add-a-callback-to-ipc-renderer-send (answer from tobey blaber), another example is here. https://gist.github.com/ccnokes/6cde9022cef33106f7360af8f671a6c1

Probably I should expose fs functions via the context bridge too. I shall look into this but it seems now to access main stuff in renderer you now have to use the preload script. My last electron app I made could access fs in the renderer without using a preload script - I guess they changed stuff to make it more secure

import electron in from 'electron' in renderer will not work. You need to expose what you want in the preload script