electron webpack Uncaught ReferenceError: require is not defined "querystring"

huangapple
go评论78阅读模式
英文:

electron webpack Uncaught ReferenceError: require is not defined "querystring"

问题

I'm here to help with the translation. Here's the translated content you provided:

我正在尝试运行一个旧的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｣: 项目正在运行，地址为http://localhost:8080/
i ｢wds｣: webpack输出从http://localhost:8080/提供
i ｢atl｣: 使用typescript@3.4.4从typescript获取
i ｢atl｣: 从./tsconfig.json获取tsconfig.json
i ｢atl｣: 使用typescript@3.4.4从typescript获取
i ｢atl｣: 从./tsconfig.json获取tsconfig.json
i ｢atl｣: 启动检查在单独的进程中...
i ｢atl｣: 时间：3514毫秒
i ｢atl｣: 启动检查在单独的进程中...
i ｢atl｣: 时间：2355毫秒
‼ ｢wdm｣: 哈希：4697290ef706a2a99ad5e1b5fab076995682e95f
版本：webpack 4.30.0
子项目
    哈希：4697290ef706a2a99ad5
    时间：17242毫秒
    构建时间：2023-05-24 15:55:15
        资产      大小  块               块名称
    bundle.js  6.53 MiB    main  [已发出]  main
    入口点 main = bundle.js
    [0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.tsx 52字节 {main} [已构建]
    [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [已构建]
    [./node_modules/mousetrap/mousetrap.js] 33.1 KiB {main} [已构建]
    [./node_modules/react-dom/index.js] 1.33 KiB {main} [已构建]
    [./node_modules/react-redux/es/index.js] 416字节 {main} [已构建]
    [./node_modules/react/index.js] 190字节 {main} [已构建]
    [./node_modules/strip-ansi/index.js] 161字节 {main} [已构建]
    [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 8.26 KiB {main} [已构建]
    [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [已构建]
    [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [已构建]
    [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot同步非递归^\.\/log$ 170字节 {main} [已构建]
    [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [已构建]
    [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75字节 {main} [已构建]
    [./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [已构建]
    [./src/index.tsx] 7.99 KiB {main} [已构建]
        + 695隐藏模块

    警告：./node_modules/fluent-ffmpeg/lib/options/misc.js 27:21-40
    临界依赖性：依赖性的请求是一个表达式
     @ ./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
子项目
    哈希：e1b5fab076995682e95f
    时间：13857毫秒
    构建时间：2023-05-24 15:55:11
            资产      大小  块               块名称
    background.js  4.33 MiB    main  [已发出]  main
    入口点 main = background.js
    [0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./background.ts 52字节 {main} [已构建]
    [./background.ts] 1010字节 {main} [已构建]
    [./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [已构建]
    [./node_modules/strip-ansi/index.js] 161字节 {main} [已构建]
    [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 8.26 KiB {main} [已构建]
    [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [已构建]
    [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [已构建]
    [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot同步非递归^\.\/log$ 170字节 {main} [已构建]
   

<details>
<summary>英文:</summary>

I&#39;m trying to run [an old electron app][1], but I can&#39;t figure out which node version to use, nor which part of the config/dependencies to update.

I added electron `webPreferences` in the windows, but it didn&#39;t help.
```javascript
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      contextIsolation: false,
      enableRemoteModule: true,
    },

Does someone have any idea of what to check first ? Should I try to fix warnings in the current state of the app or should I update dependencies and then fix major breaks ?

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 &quot;querystring&quot; 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&#39;t resolve &#39;fsevents&#39; in &#39;.\node_modules\chokidar\lib&#39;
     @ ./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.

Console :

Uncaught ReferenceError: require is not defined
    at eval (external_&quot;querystring&quot;: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.

Console:

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 &quot;unsafe-eval&quot; 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

Edit:

I used node 10.15.3 because that's the version chatgpt recommended me based on the dependency lists.. and the readme indicates to use node > 8. But I have no clue of which to use, nor which dependency to update in priority.
Should I start with electron, then webpack & typescript ? or maybe the dependency with warnings like fluent-ffmpeg, chokidar & fsevents ?

Also is there any centralized reference for javascript dependency compatibility ? or any tool that would help me identify conflicts & resolve them ?

Edit 2:

I can't to get node version from the renderer.js using electron 5 & node 12.18 and the example is for electron 24.

yarn dev (console)

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

yarn start (console)

.\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 &#39;exposeInMainWorld&#39; 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

Edit 3:

I've made some "progress". After updating electron to v6, I got the following error: Error: contextBridge API can only be used when contextIsolation is enabled

I tried to reenable context isolation in the windows: contextIsolation: true,
And then I got (almost) the result I was looking for: This app is using Chrome (v76.0.3809.146), Node.js (v12.4.0), and Electron (v6.1.12)
Except I'm using node v12.18 as the electron release docs recommends.

Then I tried to load the app bundle back again in the index.html, making reference on :

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

But I still get the same error :

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

yarn dev : Uncaught ReferenceError: require is not defined

Is it because I need to move and expose all IpcHandlers and all the files under src/common/ in the preload.js file using the contextBridge and ipcRenderer like :

contextBridge.exposeInMainWorld(&#39;Constants&#39;, {
	IpcEvents: () =&gt; ipcRenderer.invoke(&#39;IpcEvents&#39;),
	ping: () =&gt; ipcRenderer.invoke(&#39;ping&#39;)
})

Or is it a completely different problem like some missing path or webpack config related issue ?

I tested to add a ping handler in the main.js but then I get an error ipcMain.handle is not a function
I read about the IPC patterns but it is a lot to fully understand all at once, especially with way it has been done in the app..

Also, electron v6 require()ing node builtins in sandboxed renderers no longer implicitly loads the remote version.
Should I replace all the require by require(&#39;electron&#39;).remote.require in js and ts/x files ? Or only client side ?

答案1

得分: 2

以下是翻译好的内容：

  1. 你正在使用 Electron 4，其中包含 Node v10.11，所以你可以在此期间使用 Node 10。如果你想升级到当前支持的 Electron 版本（正如你应该的那样），请查看发布表。升级到最新版本将需要你使用最新的 LTS Node（在写作时是18），接下来的步骤应该引导你查看Breaking Changes，以便你能够适应相关的更改并从那里开始。

    对你来说其中一个相关的更改是，自从 Electron 5 起，强烈不建议在渲染进程中直接使用 Node API 或与主进程进行通信，而应该使用contextBridge。当然，这需要对你的代码库进行大规模重构，因此你可以在此期间通过以下方式使其工作：

    webPreferences: {
  nodeIntegration: true,
  contextIsolation: false
}

    这将向渲染进程暴露 Node API，而不将其与主进程的上下文分离。

  2. 当你的客户端代码大量使用 Electron 和 Node API 时，它无法在浏览器中运行，这就是使用 yarn dev 然后转到 localhost:8080 时出现 Uncaught ReferenceError: require is not defined 错误的原因。浏览器无法访问像 require() 这样的 Node API，因此会导致上面的错误。

    这就是为什么运行 yarn start 可能可以正常工作的原因，因为它启动了 Electron，而上面的配置使得 Node API 对渲染器（客户端端）可用。

    如果你进行重构并使用 contextBridge，也就是从客户端代码中清除所有 Electron 和 Node 引用，那么你将最适合在浏览器中运行客户端代码（带有一些 API 模拟）。

  3. 我建议忽略这些警告，因为升级 Electron 后很有可能它们会消失。升级 TypeScript 实际上取决于你，取决于你是否想要利用它提供的新功能，这完全是可选的。你也不必升级 Webpack（你目前使用的是版本3 - 虽然旧但有效），但你可能会发现在未来使用更现代的东西会更容易，无论是更高版本的 Webpack 还是更快速的工具如 Vite，但这不是必需的。

  4. 关于 JavaScript 依赖项兼容性的集中参考，只有由库的作者指定的，这将在安装时由像 NPM 这样的包管理器进行检查。

英文:

Let's go point by point:

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

You are using electron 4 which packs Node v10.11, so you can use Node 10 in the meantime.

If you want to upgrade to electron version which is currently supported (as you should), have a look at the releases table. Upgrading to the latest one would require you to use the latest LTS Node (18 at the time of the writing) as well and your next steps should lead to Breaking Changes so that you can adapt to the relevant ones and take it from there.

One of the relevant ones for you is that since electron 5, it's very much discouraged to use Node APIs or communicate with main process in the renderer process directly, and one should use contextBridge instead.

That of course requires a big refactoring in your codebase, so you can for the time being indeed make it work via:

 webPreferences: {
   nodeIntegration: true,
   contextIsolation: false
 }

which exposes Node APIs to renderer process, and doesn't separate it from the main's context.

> yarn dev & Uncaught ReferenceError: require is not defined

Since your client-side code heavily uses both electron and Node APIs, it can't run in the browser, which is the case when you use yarn dev and then go to localhost:8080. Browser doesn't have access to Node APIs like require() and throws the error from above as a result.

That's why running yarn start works (somewhat) fine, because it starts electron, which thanks to the config above exposes the Node APIs to the renderer (client-side).

If you perform the refactoring and use the contextBridge, ie. clean your client-side code from all electron and Node references, you will be in the best shape to run the client-side code in the browser (with some api mocking).

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

I'd ignore the warning, because chances are good they just disappear once you ugrade electron.

Upgrading TypeScript is actually up to you, whether you want to take advantage of the new features it offers, and it's completely optional.

You also doesn't have to upgrade Webpack (you have version 3 currently - old but works) but you might find it easier down the line to use something more modern, either higher version or something faster like Vite, but it's not a requirement.

> Also is there any centralized reference for javascript dependency compatibility ?

Only as specified by library authors, which gets to be checked by package managers like NPM at the time of install.

答案2

得分: 0

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

英文:

querystring is a built-in module for node.js, you need to check your dependency packages, for web consider using query-string instead.

huangapple
  • 本文由 发表于 2023年5月24日 22:30:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/76324649.html
  • electron
  • javascript
  • node.js
  • typescript
  • webpack
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定