electron 5.0.0 "Uncaught ReferenceError: require is not defined"

Question

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.

score 121 · Accepted Answer · answered Mar 12 '21 at 17:43

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`);
});

answered Mar 12 '21 at 17:43

Vigneshwaran Chandrasekaran

2,967
1
24
19

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

score 71 · Answer 2 · answered Mar 11 '19 at 00:10

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.

answered Mar 11 '19 at 00:10

junvar

11,151
2
30
46

1

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. – Hocine Abdellatif Houari Jun 04 '19 at 08:05
Well, it helped for me !! Greetings form the future – Juan Joya Sep 25 '19 at 15:37

Stev · Answer 3 · 2020-05-29T16:16:13.080

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

edited May 29 '20 at 16:16

answered Apr 25 '19 at 21:54

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

score 19 · Answer 4 · answered Aug 21 '19 at 09:17

19

set nodeIntegration to true when creating new browser window.

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

answered Aug 21 '19 at 09:17

Sri Darshana

262
2
5

1

Thank you, it really helped me, I was getting upset about Electron – Juan Joya Sep 25 '19 at 15:36

score 11 · Answer 5 · edited Nov 16 '19 at 20:44

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

edited Nov 16 '19 at 20:44

d4nyll

11,811
6
54
68

answered Oct 12 '19 at 01:43

ShapCyber

3,382
2
21
27

How would convert `const electron = require('electron');` this? – Faizan Anwer Ali Rupani Jun 11 '20 at 17:01
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? – Faizan Anwer Ali Rupani Jun 11 '20 at 17:03
you can only preload direct js files, not node modules. – Faizan Anwer Ali Rupani Jun 11 '20 at 17:04
thank you! i was looking for an alternative than just enable `nodeIntegration`. – Jack Jun 01 '21 at 16:42

score 11 · Answer 6 · edited Mar 23 '21 at 06:01

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

edited Mar 23 '21 at 06:01

DanielM

3,598
5
37
53

answered Mar 22 '21 at 11:31

pavan anand chinthalapudi

586
6
12

score 10 · Answer 7 · answered May 26 '21 at 17:33

10

For electron 13.0.0

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

answered May 26 '21 at 17:33

ron

157
1
6

where do I put this???? – Joshua Robison Jun 23 '23 at 04:46

score 7 · Answer 8 · answered Mar 20 '21 at 16:31

7

Add contextIsolation: false in webPreferences

answered Mar 20 '21 at 16:31

Artem Lazar

79
1
1

Reg Edit · Answer 9 · 2022-02-12T19:21:48.300

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.

score 6 · Answer 10 · answered Apr 26 '19 at 02:32

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

answered Apr 26 '19 at 02:32

dspring

194
1
6

electron 5.0.0 "Uncaught ReferenceError: require is not defined"

10 Answers10

Linked