电子5.0.0“未捕获的参考错误: 未定义需求”

我最初使用的是电子稳定(4.x.x) ，并且能够在浏览器和渲染器进程中使用 require。我升级到电子测试版(5.0.0) ，因为我需要一个新版本的节点，并遇到了这个错误消息在我的渲染进程，Uncaught ReferenceError: require is not defined。

我在谷歌上搜索并查看了电子文档，发现有评论说这个错误可能是由于在初始化 BrowserWindow时将 webPreferences.nodeIntegration设置为 false 造成的; 例如: new BrowserWindow({width, height, webPreferences: {nodeIntegration: false}});。但是我没有这样做，所以我认为一定有其他的问题，并继续寻找解决办法。

61864 次浏览
小开

It turns out, nodeIntegration was true by default in previous electron versions, but false by default in 5.0.0. Consequently, setting it to true resolved my issue. Not finding this change documented online in comments or on electrons page, I thought I'd make this self-answered SO post to make it easier to find for future people who encounter this issue.

小开

Like junvar said, nodeIntegration is now false by default in 5.0.0.

The electronjs FAQ has some sample code on how to set this value.

let win = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
})
win.show()
小开

junvar is right, nodeIntegration is false by default in v5.0.0.

It's the last statement in the Other Changes section of Release Notes for v5.0.0 and was also mentioned in this PR

小开

set nodeIntegration to true when creating new browser window.

app.on('ready', () => {
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
});
小开

Readers of this post should read the Do not enable Node.js Integration for Remote Content section from the Security, Native Capabilities, and Your Responsibility Guide before making a decision.

// Bad
const mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true
}
})
mainWindow.loadURL('https://example.com')


// Good
const mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(app.getAppPath(), 'preload.js')
}
})
mainWindow.loadURL('https://example.com')
小开
最佳答案

For Electron version 12 and above

const electron = require("electron");


const { app, BrowserWindow } = electron;


app.on("ready", () => {
const mainWindow = new BrowserWindow({
width: 1000,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
},
});
mainWindow.loadURL(`file://${__dirname}/index.html`);
});
小开

Add contextIsolation: false in webPreferences

小开

Assuming electron 12.0.0

set contextIsolation: false

keep below code in main.js

new BrowserWindow({
width: 800, height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
}
})
小开

For electron 13.0.0

webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
小开

You should not set contextIsolation: false.

If you do so, as several answers suggest, then certainly your code will no longer fail with "Uncaught ReferenceError: require is not defined."

But that's only because you have disabled the entire security feature! Context Isolation has been on by default since Electron 12 because it's an important security feature for all Electron applications. If you set contextIsolation: false, that's like removing the lock on the front door of your house to make it possible for your family to get in and out, rather than providing a key to those who are allowed access.

Instead, you should set contextIsolation: true (the default value) and use a preload script to expose whitelisted wrappers for any module your app may need to require. You can read more about it at the Context Isolation link, and there's a detailed example in this stackoverflow answer.


提交答案