当将electron-renderer添加到webpack时出现'Require is not defined'错误

Question

我正在开发一个 Electron 应用程序。一切都很好，直到我想要在渲染器中使用 IPC 调用一些本地功能。我知道将以下行添加到我的 Webpack 配置文件中将允许我在渲染器中导入 electron。

module.exports = {
    // ...
    target: 'electron-renderer',
}

当我添加这行代码时，出现以下错误：

Uncaught ReferenceError: require is not defined

错误的那一行是

module.exports = require("querystring");

从某种意义上讲，这是有道理的，因为浏览器不理解"requires"。

请注意，如果没有electron-renderer目标，该应用程序可以正常工作，只是我无法执行类似以下操作的功能：

import {ipcRenderer} from 'electron';

你有什么想法，我可能做错了什么吗？谢谢！

- Andrei Cioara

Answer 1

最近遇到了这个问题。需要注意的一件事是，在创建渲染窗口时，确保将nodeIntegration设置为true。

mainWindow = new electron.BrowserWindow({
    width: width,
    height: height,
    webPreferences: {
        nodeIntegration: true
    }
});

- Brian DiCasa

---

请注意，将nodeIntegration: true设置为真通常是不安全的。 https://electronjs.org/docs/tutorial/security - Luke H

@AndreiCioara想知道你解决了这个问题没有，对于我来说nodeIntegration: true已经是true了，但我还是遇到了这个错误。 - jflood.net

提醒一下，这个主题上的每篇文章都说同样的事情——把nodeIntegration设置为true。当nodeIntegration已经被设置为true，但仍然出现“require未定义”错误时，你该怎么做？ - JimboTwice

我也仍然遇到这个问题，而且nodeIntegration也被设置为true。 - Lamar Tony Daughma

我自己也在处理这个问题，即使使用 nodeIntegration: true 仍然出现了“require未定义”的错误。将 contextIsolation: false 也设置为true，这使得它开始正常工作了。 - detonationbox0

Answer 2

我也遇到了这个问题，新答案如下：

mainWindow = new electron.BrowserWindow({
    width: width,
    height: height,
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});

- lygstate

Answer 3

据我所知，建议的方法是使用contextBridge模块（在preload.js脚本中）。它允许您保持上下文隔离的同时，安全地将API暴露给网站运行的上下文。

https://www.electronjs.org/docs/latest/tutorial/context-isolation

按照这种方式，我也发现在Webpack配置中不再需要指定target属性。

- keV