无法解析 \node_modules\electron 中的“fs”

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

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, eg clipboard , can be only used from the "electron-main" side of your application.

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

Answer 2

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