Can't resolve 'fs' in \node_modules\electron

Question

I am using the electron-react boilerplate and want to use an electron dialog in App.tsx:

const { dialog } = require('@electron/remote') //also tried with import

const Hello = () => {
  const readFromFile = async () => {
    dialog.showOpenDialog({})
  }
  return (
    <>
      <button onClick={() => readFromFile()} >Test</button>
    </>
  )
}

in main.ts I placed the following line at the top

require('@electron/remote/main').initialize()

In the end I always get this error:

Module not found: Error: Can't resolve 'fs' in 'C:\Users\myUsername\source\repos\electronTest\node_modules\electron'

I also tried nodeIntegration: true and contextIsolation: false

Answer 1

Check your webpack.config.js. Looks like you target is not electron-main or electron-renderer.

Answer 2

Just spent a while on this and <rant about JS community>... eh. Maybe this will help others.

tl;dr

You can only use electron's imports in electron-main side.

longer story

Electron is split into electron-main and electron-renderer. As others suggested, you need to update webpack's config with the target pointing at the correct electron.

In case you're using one of the electron builder boilerplates, you might see directory .erb with a few webpack configs. Especially, there might be one with target = "electron-main" and another with target = ["web", "electron-renderer"]. So it feels like mission accomplished; however, according to webpack's doc on target, if you pass a list, then a common config is set. Since web doesn't include fs, the common part also won't include fs.

For the reason above, some of electron imports, e.g. clipboard, can be only used from the "electron-main" side of your application.

The work-around, e.g. using clipboard on the application side, is to use IPC to communicate between main and renderer sides.