'Require is not defined' when adding electron-renderer to webpack

Question

I am developing an electron app. All good and nice until I wanted to use IPC from the renderer to call some native features. I understand that adding the following line to my Webpack config would allow me to import electron on the renderer side.

module.exports = {
    // ...
    target: 'electron-renderer',
}

I get the following error when adding this line

Uncaught ReferenceError: require is not defined

And the offending line is

module.exports = require("querystring");

Which sort of makes sense, since the browser does not understand "requires".

Note that without the electron-renderer target the application works well, except I cannot do things like

import {ipcRenderer} from 'electron';

Any thoughts what I could be doing wrong? Thank you!

Answer 1

Also faced this issue, new answer:

mainWindow = new electron.BrowserWindow({
    width: width,
    height: height,
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});

Answer 2

Just recently ran into this. One thing to look out for is to ensure nodeIntegration is set to true when creating your renderer windows.

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