Question

electron webpack 未捕获的 ReferenceError：require 未定义“querystring”

2023-05-24

721

javascript node.js typescript webpack 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 [email protected] from typescript
i ｢atl｣: Using tsconfig.json from ./tsconfig.json
i ｢atl｣: Using [email protected] 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.

Node

$ 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 根据依赖项列表向我推荐的版本。并且自述文件指示使用 node > 8。但我不知道该使用哪一个，也不知道优先更新哪个依赖项。我应该从 electron 开始，然后是 webpack 和 typescript 吗？或者可能是具有警告的依赖项，如 fluent-ffmpeg、chokidar 和 fsevents？

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

编辑 2：

我无法使用 electron 5 从 renderer.js 获取节点版本 &节点 12.18 和示例适用于 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 后，我收到以下错误： 错误：contextBridge API 仅在启用 contextIsolation 时才可用

我尝试在 windows 中重新启用上下文隔离： 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 无法加载资源：net::ERR_CONNECTION_REFUSED

yarn dev ：未捕获的 ReferenceError：未定义 require

是不是因为我需要移动并公开所有 IpcHandlers 以及 preload.js 文件中 src/common/ 下的所有文件，使用 contextBridge 和 ipcRenderer 如下：

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

或者它是一个完全不同的问题，比如某些缺少路径或 webpack 配置相关问题？

我测试在 main.js 中添加一个 ping 处理程序，但随后出现错误 ipcMain.handle 不是函数 我阅读了有关 IPC 模式的信息，但要一次性完全理解很多内容，尤其是在应用程序中完成的方式。

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

Answer 1

让我们逐点看一下：

I can't figure out which node version to use, nor which part of the config/dependencies to update.

您正在使用包含 Node v10.11 的 electron 4，因此您可以暂时使用 Node 10。

如果您想升级到当前受支持的 electron 版本（您应该这样做），请查看发布表。升级到最新版本需要您使用最新的 LTS Node（撰写本文时为 18），并且您的下一步应该会导致重大更改，以便您可以适应相关的更改并从那里开始。

与您相关的一个是，从 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 时就是这种情况。浏览器无法访问 require() 等 Node API，因此会从上面抛出错误。

这就是为什么运行 yarn start 可以（某种程度上）正常工作的原因，因为它启动了 electron，这要归功于上述配置将 Node API 公开给渲染器（客户端）。

如果您执行重构并使用 contextBridge ，即。清除客户端代码中所有的 electron 和 Node 引用，你将以最佳状态在浏览器中运行客户端代码（使用一些 api 模拟）。

Should I start with electron, then webpack & typescript ? or maybe the dependency with warnings like fluent-ffmpeg, chokidar & fsevents ?

我会忽略这个警告，因为很有可能一旦你升级 electron 它们就会消失。

升级 TypeScript 实际上取决于你，无论你是否想利用它提供的新功能，它是完全可选的。

你也不必升级 Webpack（你目前有版本 3 - 旧但可以工作）但你可能会发现使用更现代的东西更容易，无论是更高版本还是更快的东西，如 Vite，但这不是必需的。

Also is there any centralized reference for javascript dependency compatibility ?

仅按库作者指定，在安装时由 NPM 等包管理器检查。

Answer 2

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