javascript - Electron JS - Cannot destructure property 'BrowserWindow' of 'require(...).remote' as it is undefined

Question

This is in Renderer Process:

const {BrowserWindow} = require('electron').remote

const path = require('path')
const url = require('url')

const newWindowButton = document.getElementById('new-window-btn');
newWindowButton.addEventListener('click',(e)=>{
    let win3 = new BrowserWindow();
    win3.loadURL(url.format({
        pathname: path.join(__dirname,'index3.html'),
        protocol: "file",
        slashes: true
    }))

})

I am not able to open a new window in renderer process, getting the below error.

**Uncaught TypeError: Cannot destructure property 'BrowserWindow' of 'require(...).remote' as it is

undefined.**
    at Object.<anonymous> (D:ElectronTutehelloWorldindex1.js:4)
    at Object.<anonymous> (D:ElectronTutehelloWorldindex1.js:21)
    at Module._compile (internal/modules/cjs/loader.js:1145)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js`enter code here`:1166)
    at Module.load (internal/modules/cjs/loader.js:981)
    at Module._load (internal/modules/cjs/loader.js:881)
    at Function.Module._load (electron/js2c/asar.js:769)
    at Module.require (internal/modules/cjs/loader.js:1023)
    at require (internal/modules/cjs/helpers.js:77)
    at index1.html:13

question from:https://stackoverflow.com/questions/65877497/electron-js-require-electron

Answer 1

 mainWindow = new BrowserWindow({
    width: 1280,
    height: 960,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
     },
  });

I believe you are using the new version of Electron. From v9 version, we are not allowed to use remote on the renderer unless set the enableRemoteModule as true.

Plus in order to load node_moduels on renderer by using require(), we need to also enable the nodeIntegration as well. As require is one of node APIs.

https://github.com/electron/electron/issues/21408