electron webpack 报错：Uncaught ReferenceError: require is not defined，"querystring"

Question

我正在尝试运行一款旧的Electron应用程序，但我无法确定要使用哪个Node版本，也无法确定需要更新哪个配置文件/依赖项中的部分。

我在Windows中添加了Electron的webPreferences，但没有起到帮助作用。

    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      contextIsolation: false,
      enableRemoteModule: true,
    },

有人有任何建议要先检查什么？我应该尝试在当前应用程序状态下修复警告，还是应该更新依赖项，然后修复主要故障？

yarn dev

yarn run v1.22.19
$ webpack-dev-server --hot --watch --config webpack.config.dev.js
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from http://localhost:8080/
i ｢atl｣: Using typescript@3.4.4 from typescript
i ｢atl｣: Using tsconfig.json from ./tsconfig.json
i ｢atl｣: Using typescript@3.4.4 from typescript
i ｢atl｣: Using tsconfig.json from ./tsconfig.json
i ｢atl｣: Checking started in a separate process...
i ｢atl｣: Time: 3514ms
i ｢atl｣: Checking started in a separate process...
i ｢atl｣: Time: 2355ms
‼ ｢wdm｣: Hash: 4697290ef706a2a99ad5e1b5fab076995682e95f
Version: webpack 4.30.0
Child
    Hash: 4697290ef706a2a99ad5
    Time: 17242ms
    Built at: 2023-05-24 15:55:15
        Asset      Size  Chunks             Chunk Names
    bundle.js  6.53 MiB    main  [emitted]  main
    Entrypoint main = bundle.js
    [0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.tsx 52 bytes {main} [built]
    [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
    [./node_modules/mousetrap/mousetrap.js] 33.1 KiB {main} [built]
    [./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
    [./node_modules/react-redux/es/index.js] 416 bytes {main} [built]
    [./node_modules/react/index.js] 190 bytes {main} [built]
    [./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
    [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 8.26 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
    [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
    [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [built]
    [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
    [./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
    [./src/index.tsx] 7.99 KiB {main} [built]
        + 695 hidden modules

    WARNING in ./node_modules/fluent-ffmpeg/lib/options/misc.js 27:21-40
    Critical dependency: the request of a dependency is an expression
     @ ./node_modules/fluent-ffmpeg/lib/fluent-ffmpeg.js
     @ ./node_modules/fluent-ffmpeg/index.js
     @ ./src/common/Util.js
     @ ./src/views/Duplicates.tsx
     @ ./src/index.tsx
Child
    Hash: e1b5fab076995682e95f
    Time: 13857ms
    Built at: 2023-05-24 15:55:11
            Asset      Size  Chunks             Chunk Names
    background.js  4.33 MiB    main  [emitted]  main
    Entrypoint main = background.js
    [0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./background.ts 52 bytes {main} [built]
    [./background.ts] 1010 bytes {main} [built]
    [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
    [./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
    [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 8.26 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
    [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
    [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
    [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [built]
    [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
    [./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
    [./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.11 KiB {main} [built]
    [./src/background/BackgroundWindow.ts] 10.1 KiB {main} [built]
    [./src/main/Logger.js] 1010 bytes {main} [built]
    [querystring] external "querystring" 42 bytes {main} [built]
        + 586 hidden modules

    WARNING in ./node_modules/fluent-ffmpeg/lib/options/misc.js 27:21-40
    Critical dependency: the request of a dependency is an expression
     @ ./node_modules/fluent-ffmpeg/lib/fluent-ffmpeg.js
     @ ./node_modules/fluent-ffmpeg/index.js
     @ ./src/background/ScreenshotEngine.ts
     @ ./src/background/BackgroundWindow.ts
     @ ./background.ts

    WARNING in ./node_modules/chokidar/lib/fsevents-handler.js
    Module not found: Error: Can't resolve 'fsevents' in '.\node_modules\chokidar\lib'
     @ ./node_modules/chokidar/lib/fsevents-handler.js
     @ ./node_modules/chokidar/index.js
     @ ./src/background/Watcher.ts
     @ ./src/background/BackgroundWindow.ts
     @ ./background.ts
i ｢wdm｣: Compiled with warnings.

控制台：

Uncaught ReferenceError: require is not defined
    at eval (external_"querystring":1:18)
    at Object.querystring (bundle.js:8870:1)
    at __webpack_require__ (bundle.js:703:30)
    at fn (bundle.js:77:20)
    at Object.eval (webpack:///(:8080/webpack)-dev-server/client?:6:19)
    at eval (webpack:///(:8080/webpack)-dev-server/client?:299:30)
    at ./node_modules/webpack-dev-server/client/index.js?http://localhost:8080 (bundle.js:7798:1)
    at __webpack_require__ (bundle.js:703:30)
    at fn (bundle.js:77:20)
    at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:1:1)

yarn start

yarn run v1.22.19
$ cross-env NODE_ENV=development electron .

process.env.NODE_ENV: development
Done in 72.06s.

控制台：

bundle.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
.\node_modules\electron\dist\resources\electron.asar\renderer\security-warnings.js:170 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
    Policy set or a policy with "unsafe-eval" enabled. This exposes users of
    this app to unnecessary security risks.
 
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
 This warning will not show up
once the app is packaged.

节点

$ nvm list

    16.10.0
    14.21.3
    14.17.0
    12.4.0
  * 10.15.3 (Currently using 64-bit executable)
    10.8.0
    10.3.0
    9.11.2
    8.9.4

编辑：

我使用 node 10.15.3，因为 chatgpt 基于依赖列表建议我使用这个版本，而 readme 表明要使用 node > 8。但我不知道该用哪个版本，也不知道要优先更新哪个依赖项。 我应该从 electron 开始，然后是 webpack 和 typescript 吗？还是从 fluent-ffmpeg、chokidar 和 fsevents 这样带有警告的依赖项开始呢？

此外，是否有任何关于 JavaScript 依赖项兼容性的集中参考资料？或者有没有工具可以帮助我识别冲突并解决它们？

编辑 2：

我无法在 electron 5 和 node 12.18 中使用 renderer.js 获取 node 版本，而 example 是针对 electron 24 的。

yarn dev（控制台）

renderer.js:2 Uncaught ReferenceError: versions is not defined

yarn start（控制台）

.\node_modules\electron\dist\resources\electron.asar\renderer\init.js:177 Unable to load preload script: .\preload.js
(anonymous) @ .\node_modules\electron\dist\resources\electron.asar\renderer\init.js:177

.\node_modules\electron\dist\resources\electron.asar\renderer\init.js:178 TypeError: Cannot read property 'exposeInMainWorld' of undefined
(anonymous) @ .\node_modules\electron\dist\resources\electron.asar\renderer\init.js:178

renderer.js:2 Uncaught ReferenceError: versions is not defined
    at renderer.js:2

编辑3：

我取得了一些“进展”。将 electron 更新到 v6 后，我遇到了以下错误：Error: contextBridge API can only be used when contextIsolation is enabled

我尝试在窗口中重新启用上下文隔离：contextIsolation: true, 然后我几乎得到了我想要的结果：此应用程序正在使用 Chrome（v76.0.3809.146）、Node.js（v12.4.0）和 Electron（v6.1.12） 除了我正在使用 node v12.18，因为 electron 发布文档建议使用该版本。

然后我尝试再次在 index.html 中加载应用程序包，引用：

• ./dist/bundle.js
• http://localhost:8080/bundle.js

但我仍然遇到相同的错误：

yarn start：bundle.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED

yarn dev：Uncaught ReferenceError: require is not defined

是因为我需要使用contextBridge和ipcRenderer将IpcHandlers和src/common/目录下的所有文件在preload.js文件中移动和公开吗？

contextBridge.exposeInMainWorld('Constants', {
    IpcEvents: () => ipcRenderer.invoke('IpcEvents'),
    ping: () => ipcRenderer.invoke('ping')
})

还是说这是一个完全不同的问题，比如一些缺失的路径或webpack配置相关的问题？

我尝试在main.js中添加一个ping处理程序，但是我得到了一个错误ipcMain.handle不是一个函数。我阅读了IPC模式，但是一次性完全理解它们太难了，特别是在应用程序中的使用方式。

此外，electron v6 在沙盒渲染器中require() node内置模块不再隐式加载远程版本。 我应该在js和ts/x文件中将所有的require替换为require('electron').remote.require吗？还是只在客户端进行替换？

- belgacea

---

作为这个应用的用户，我一开始想要添加一些功能（比如排序选项）来使其回到正确的轨道上，但现在我也想要防止安全风险。一旦我修复了所有弃用的导入并重新构建，我将尝试遵循最新的 electron 最佳实践，因为我确定它需要更多的重构。yarn start 可以工作，但是我在 DevTool 控制台中收到以下错误消息（并且应用程序没有正确渲染）：Failed to load resource: net::ERR_CONNECTION_REFUSED bundle.js:1 - belgacea

你无法使其工作，因为错误提示 Cannot read property 'exposeInMainWorld' of undefined，说明在 Electron 5 中没有 contextBridge API，这与 Chat GPT 告诉我的相反。实际上，我在 v6 中找到了它，所以可以试一下。 - Dan Macak

再次感谢，我尝试了 Electron v6，但在 Electron 中加载 bundle.js 时仍然遇到相同的错误。 - belgacea

关于您的bundle.js加载问题，请使用https://webpack.js.org/plugins/html-webpack-plugin/。它使得index.html与您的捆绑代码保持同步变得容易。至于`ipcMain.handle is not a function，它确实是它所说的，handle不存在。相反，您可以使用on或addListener`。顺便说一句，为了将来，我建议使用typescript，因为这是您第二次错过无效的方法调用。 - Dan Macak

Answer 1

让我们逐点来看：

我无法确定使用哪个节点版本，也不确定需要更新哪个部分的config/dependencies。

您正在使用打包了Node v10.11的electron 4，因此您可以在此期间使用Node 10。

如果您想升级到当前支持的electron版本（正常情况下应该如此），请查看 发布表。升级到最新版本需要您使用最新的LTS Node（本文撰写时为18），您的下一步应该是 Breaking Changes，以便您可以适应相关更改并从中继续进行。

对于您来说，其中一个相关的更改是自electron 5以来，强烈建议不要直接在渲染器进程中使用Node API或与主进程通信，而应改用 contextBridge。

当然，这需要在您的代码库中进行大规模重构，因此您可以暂时通过以下方式使其工作：

 webPreferences: {
   nodeIntegration: true,
   contextIsolation: false
 }

该程序将Node API暴露给渲染进程，并且不将其与主上下文分离。

yarn dev & Uncaught ReferenceError: require is not defined

由于您的客户端代码大量使用了electron和Node API，因此无法在浏览器中运行，这是使用yarn dev并转到localhost:8080时的情况。浏览器无法访问Node API，例如require()，因此会抛出上述错误。

这就是为什么运行yarn start（有点）正常工作的原因，因为它启动了electron，由于上面的配置，它将Node API暴露给了渲染器（客户端）。

如果您进行重构并使用contextBridge，即从所有electron和Node引用中清除客户端代码，则可以以最佳状态在浏览器中运行客户端代码（带有一些API模拟）。

我应该从electron开始，然后使用webpack和typescript吗？还是依赖项警告，例如fluent-ffmpeg、chokidar和fsevents？

我会忽略警告，因为升级electron后它们很可能会消失。

升级TypeScript实际上取决于您，无论您想利用其提供的新功能还是不升级都是完全可选的。

您也不必升级Webpack（您当前使用版本3 - 虽然旧但仍能工作），但是您可能会发现，在使用更现代的高版本或更快速的Vite之类的东西时，这将更容易处理。但这不是必需的。

还有没有JavaScript依赖项兼容性的集中参考资料？

只有由库作者指定的内容，可以在安装时由诸如NPM之类的软件包管理器进行检查。

- Dan Macak

---

非常感谢您提供的所有建议。我正在尝试理解上下文隔离，但我仍然无法让它与preload.js脚本一起工作。我已更新我的问题。 - belgacea

Answer 2

querystring 是 Node.js 的内置模块，您需要检查您的依赖包。对于 Web 开发，请考虑使用 query-string。

- weiliang

---

听起来令人惊讶，querystring在项目中没有被调用或导入... 我发现的唯一参考是在yarn.lock文件中。 - belgacea