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

我正在使用电子反应样板并想使用电子dialog在 App.tsx 中：

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

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

在 main.ts 中，我将以下行放在顶部

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

最后我总是得到这个错误：

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

我也尝试过nodeIntegration: true and contextIsolation: false

刚刚花了一段时间在这上面... 呃。也许这会帮助其他人。

tl;dr

您只能在以下位置使用电子导入electron-main side.

更长的故事

电子被分裂成electron-main and electron-renderer。正如其他人所建议的，您需要更新webpack的配置与target指向正确的electron.

如果您正在使用其中之一电子构建器样板 https://www.electron.build/，你可能会看到目录.erb有一些 webpack 配置。特别是，可能有一个target = "electron-main"另一个与target = ["web", "electron-renderer"]。所以感觉就像任务完成了；然而，根据webpack 的文档target https://webpack.js.org/configuration/target/，如果您传递一个列表，则设置一个通用配置。自从web不包括fs，公共部分也不包括fs.

由于上述原因，一些electron进口，例如clipboard，只能从应用程序的“电子主”端使用。

解决方法，例如在应用程序端使用剪贴板，就是使用IPC https://www.electronjs.org/docs/latest/tutorial/ipc之间进行沟通main and renderer sides.