fs.existsSync is not a function when used in electron

Question

I am using Angular 10, Electron 10.0 and electron-builder v22.8.0.

When starting my Electron app, I receive the following error in the console:

fs.existsSync is not a function when used in electron
    getElectronPath @ ./node_modules/events/events.js:6
    <anonymous> @ ./node_modules/events/events.js:17
    ./node_modules/electron/index.js @ ./node_modules/events/events.js:19
    __webpack_require__ @ ./webpack/bootstrap:79
    ./src/app/projectview/new/new.component.ts @ ./src/app/projectview/new/new.component.ts:1
    [...]
    at __webpack_require__ (bootstrap: 79)

The error pops up here:

It happens when I import electron and have the following line in my renderer process:

import { remote } from 'electron';

// later on in my component:
remote.dialog.showOpenDialog(...);

nodeIntegration is true when creating the BrowserWindow.

   [...]
   win = new BrowserWindow({
      webPreferences: {
          webSecurity: false,
          nodeIntegrationInWorker: true,
          nodeIntegration: true,
          allowRunningInsecureContent: (serve) ? true : false,
    },

I have browsed entire StackOverflow, but can't find any solution I haven't tried. Can anyone help me?

Answer 1

so based on your sentence: It happens when I import electron and have the following line in my renderer process: import { remote } from 'electron';

in electron 10 is a breaking change of the remote api.
the webpreference "enableRemoteModule" is now by default false.

activate the module and test again:

const w = new BrowserWindow({
    webPreferences: {
        enableRemoteModule: true
    }
})

here you find all breaking changes

checkout the recommended way to use ipcRenderer:
use ipcRenderer and not remote