类型错误：window.require 不是 function

Question

Im trying to build an electron app and want to use window.require. Unfortunately the compiler says "TypeError: window.require is not a function". Ironically require works only in main.js.

Here the code Im trying to run:

const electron = window.require('electron')
const low =  window.require('lowdb')
const FileSync = window.require('lowdb/adapters/FileSync')

I read in another post that somebody have had the same problem and it was fixed by adding this code into the.html file:

    <script type="text/javascript" src="../../../Gehaltseinstellungen_Hinzufügen.js">
        window.nodeRequire = require;
        delete window.require;
        delete window.exports;
        delete window.module;
    </script>

Also the author said using "nodeRequire" instead of require would solve the problem but it doesn't...

Another option I read about is that the NodeIntegration is set to false while the rendering process is activated, but I don't know how to activate Node while rendering.

Answer 1

It is unclear what version of Electron you are using. The syntax you are using is non-standard.

First – if you are using Electron 5.0, nodeIntegration is false by default in BrowserWindows so you need to specify it explicitly when you create your window:

mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true
  }
})

---

Given the above, the syntax below works fine (ie no 'window' reference needed):

const { ipcRenderer, remote } = require('electron');

Answer 2

you can set the webPreferences.contextIsolation to be false like this

    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }

it maybe works

Answer 3

Needed all 3 setup like so to make this work:

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

note: macbook m1, big sur 11.4, maybe it has to do something about OS, idk.

Answer 4

Same issue in Electron + React + Typescript. This solved it for me

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

Answer 5

I also met this issue in Electron + Angular.

  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }

Configuration above works for me.

Answer 6

I was stuck with this problem for a couple of days. Could not figure out for the life of me. Went through a lot of docs and stackoverflow and finally!!!!

I fixed this error the following way :

create a file preload.js :

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

then in main.js/electron.js:

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      //this line is crucial
      preload: path.join(app.getAppPath(), '/path-to-file/preload.js'),
      contextIsolation: false
    }
  })

and finally in App.js:

const { ipcRenderer } = window

I got ipcRenderer in window from electron. I'm pretty sure you can get anything else that you would want.

Answer 7

You don't need to modify web preferences as has been suggested, and I would recommend not doing it unless you have a better reason to because of the implied security issues ( https://www.electronjs.org/docs/latest/tutorial/security#isolation-for-untrusted-content ).

Instead, what you can do is use the preload script to add any functionality you need to window . Like this for example:

preload.js (located in the root folder):

contextBridge.exposeInMainWorld('ipcRenderer', {
  invoke: (event) => ipcRenderer.invoke(event),
});

webPreferences in main.js:

webPreferences: {
  preload: path.join(__dirname, 'preload.js'),
}

Now in your code you can reference it:

const { ipcRenderer } = window as any;
const response = await ipcRenderer.invoke(...);

Reference documentation here: https://www.electronjs.org/docs/latest/tutorial/tutorial-preload#communicating-between-processes