无法解析'\node_modules\electron'中的"fs"

Question

我正在使用 electron-react 脚手架，并且想在 App.tsx 中使用一个 electron dialog：

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和contextIsolation: false

- schgab

Answer 1

我刚花了一段时间来处理这个问题，<对JS社区的抱怨>…嗯。也许这会帮助其他人。

tl;dr

你只能在 electron-main 侧使用 electron 的导入。

更详细的故事

Electron 分为 electron-main 和 electron-renderer。如其他人所建议的那样，您需要使用正确的 electron 更新 webpack 的配置文件。

如果您正在使用其中一个electron builder boilerplates，您可能会看到带有几个 webpack 配置的目录 .erb。特别是，可能会有一个带有 target = "electron-main" 和另一个带有 target = ["web", "electron-renderer"] 的配置文件。因此，感觉任务已完成；然而，根据 webpack 关于 target 的文档，如果传递列表，则设置公共配置。由于 web 不包含 fs，因此公共部分也不包括 fs。

由于上述原因，一些 electron 导入，例如 clipboard，只能从应用程序的 "electron-main" 侧使用。

解决方法，例如在应用程序端使用 clipboard，是使用 IPC 在 main 和 renderer 侧之间进行通信。

- Dawid Laszuk

---

我曾经认为@electron/remote有效地提供了IPC命令，以填补electron14发布时的空白。 - Djones4822

Answer 2

请检查你的webpack.config.js文件。看起来你的target不是electron-main或electron-renderer。

- AndreyProgr

---

在 .erb 下的 React 脚手架中有许多 webpack.config.ts 文件。其中有 2 个文件将目标定义为 ['web', 'electron-renderer']。 - schgab