Electronjs window.require not a function

Question

I'm using create-react-app (react-scripts v3.0.0) and electronjs (v5.0.1). I'm trying to pass events from the renderer to main process using the 'icpMain' module as described here, but get the error window.require is not a function for the line

const { ipcRenderer } = window.require('electron');

How can I get require into the global scope in the renderer process? Or is there another way of communicating between the main and renderer process?

Edit:

I've tried removing the react build entirely and get the same results simply using the electron example code in index.html.

Answer 1

Since Electron 12, contextIsolation is be enabled by default, the implication being that require() cannot be used in the renderer process unless contextIsolation is false, more info in this link https://www.electronjs.org/docs/breaking-changes#default-changed-contextisolation-defaults-to-true

So include the following:

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

Answer 2

It looks like adding the preference:

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

is needed to enable require in the renderer process.

Answer 3

Make sure webpreferences is like this.

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

Answer 4

Indeed, you have to set nodeIntegration to true in your BrowserWindow webPreferences since the version 5.0.0 the default values of nodeIntegration and webviewTag are false to improve security. Electron associated PR: 16235

Answer 5

I fix this issue to add webPreferences:{ nodeIntegration: true,preload: '${__dirname}/preload.js}', in electron.js file and add preload.js file in your directory (I added in /public directory where my electron.js file exists)

electron.js

mainWindow = new BrowserWindow({
 title: 'Electron App',
 height: 650,
 width: 1140,
 webPreferences: { 
  nodeIntegration: true,
  preload: `${__dirname}/preload.js`,
  webSecurity: false 
 },
 show: false,
 frame: true,
 closeable: false,
 resizable: false,
 transparent: false,
 center: true,
});

ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg); // prints "ping"
  event.reply('asynchronous-reply', 'pong');
});

preload.js

in preload.js file just add below line:

window.ipcRenderer = require('electron').ipcRenderer;

ReactComponent.js

Write below code in your component function i.e: myTestHandle()

myTestHandle = () => {
  window.ipcRenderer.on('asynchronous-reply', (event, arg) => {
    console.log(arg); // prints "pong"
  });
  window.ipcRenderer.send('asynchronous-message', 'ping');
}
myTestHandle();

or call myTestHandle function anywhere in your component