javascript - Can't resolve 'fs' in node_moduleselectron - Stack Overflow

admin管理员组

文章数量:1401595

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

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

• javascript
• node.js
• electron

Share Improve this question Follow edited Nov 26, 2021 at 14:29 David784 7,47433 gold badges2424 silver badges3535 bronze badges asked Nov 26, 2021 at 14:26 schgabschgab 66677 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Just spent a while on this and <rant about JS munity>... 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 acplished; however, according to webpack's doc on target, if you pass a list, then a mon config is set. Since web doesn't include fs, the mon 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 municate between main and renderer sides.

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

本文标签： javascriptCan39t resolve 39fs39 in nodemoduleselectronStack Overflow