85

I had initially been using electron stable (4.x.x), and was able to use require in both my browser and renderer processes. I upgraded to electron beta (5.0.0) because I needed a newer version of node and encountered this error message in my renderer process, Uncaught ReferenceError: require is not defined.

Googling and looking through the electron docs, I found comments saying the error could be caused by setting webPreferences.nodeIntegration to false when initializing the BrowserWindow; e.g.: new BrowserWindow({width, height, webPreferences: {nodeIntegration: false}});. But I was not doing this, so I thought something else must be the issue and continued searching for a resolution.

10 Answers 10

131

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`);
});
Sign up to request clarification or add additional context in comments.

5 Comments

webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true, }, these three lines save my life , thanks,
contextIsolation: false fixed it for me It only worked in older versions without that
Thanks, this worked for me. I was missing enableRemoteModule.
Setting contextIsolation: false only works because it disables an important security feature. This is not the approach recommended by the Electron docs. Instead, you should use a preload script to expose whitelisted wrappers for any module your app may need to require. I've explained this further in my answer.
72

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.

2 Comments

although when I open DevTool on my electron app (electron v4.1.4), it show the warning that nodeIntegeration is gonna turn false by default on the major releases.
Well, it helped for me !! Greetings form the future
59

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()

3 Comments

Any idea why this would still not work for me when I set the flag to true, and even tried to place const fs = require('fs') in the renderer.js file as well in the js script file I use?
having same problem, stuck from 3 Days
One mistake i made was doing this: { nodeIntegration: true } instead of this: { webPreferences: { nodeIntegration: true } }
19

set nodeIntegration to true when creating new browser window.

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

1 Comment

Thank you, it really helped me, I was getting upset about Electron
11

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')

4 Comments

How would convert const electron = require('electron'); this?
Like this preload: path.join(app.getAppPath(), 'electron.js')? electron.js not a file. Actuall location is node_modules\electron\index.js. how would you include this as preload?
you can only preload direct js files, not node modules.
thank you! i was looking for an alternative than just enable nodeIntegration.
11

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,
          }
    })

Comments

10

For electron 13.0.0

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

1 Comment

where do I put this????
7

Add contextIsolation: false in webPreferences

Comments

7

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.

Comments

6

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.