82

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.

pushkin
  • 9,575
  • 15
  • 51
  • 95
junvar
  • 11,151
  • 2
  • 30
  • 46

10 Answers10

121

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`);
});
  • For reference https://github.com/electron/electron/issues/17241 – Vigneshwaran Chandrasekaran Mar 12 '21 at 17:44
  • 12
    webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true, }, these three lines save my life , thanks, – Rashid Iqbal Mar 18 '21 at 07:25
  • 1
    `contextIsolation: false` fixed it for me It only worked in older versions without that – traderjosh Apr 16 '21 at 23:18
  • Thanks, this worked for me. I was missing enableRemoteModule. – Fatemeh Karimi Jun 04 '21 at 18:25
  • 2
    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. – Reg Edit Nov 15 '21 at 12:11
71

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.

junvar
  • 11,151
  • 2
  • 30
  • 46
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()
Stev
  • 1,088
  • 10
  • 14
  • 2
    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? – Vass Apr 07 '21 at 02:03
  • having same problem, stuck from 3 Days – Aman Deep Jun 10 '21 at 09:48
  • 1
    One mistake i made was doing this: { nodeIntegration: true } instead of this: { webPreferences: { nodeIntegration: true } } – greghmerrill Sep 14 '21 at 16:02
19

set nodeIntegration to true when creating new browser window.

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
});
Sri Darshana
  • 262
  • 2
  • 5
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')
d4nyll
  • 11,811
  • 6
  • 54
  • 68
ShapCyber
  • 3,382
  • 2
  • 21
  • 27
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,
          }
    })
DanielM
  • 3,598
  • 5
  • 37
  • 53
10

For electron 13.0.0

webPreferences: {
  nodeIntegration: true,
  contextIsolation: false,
  enableRemoteModule: true
}
ron
  • 157
  • 1
  • 6
7

Add contextIsolation: false in webPreferences

Artem Lazar
  • 79
  • 1
  • 1
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.

Reg Edit
  • 6,719
  • 1
  • 35
  • 46
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

dspring
  • 194
  • 1
  • 6