How to access some electron modules from renderer process with nodeIntegration enabled?

Question

I am developing an app using Electron.

In the main process, in my main.js file, I have the following code:

const win = new BrowserWindow({
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
        sandbox: false
    }
});

Then in the renderer process, in my HTML file, in a loaded script, I have the following:

const { systemPreferences } = require("electron");

But systemPreferences comes undefined.

This doesn't happen when I do the same in the main process.

Also, I can access some other modules like require("electron").shell in the renderer process with no problems.

Why does that happen? And how can I use systemPreferences directly in the renderer process?

Answer 1

Ok I've just found out what to do.

In the past you could use require("electron").remote.systemPreferences. But remote was removed from Electron's default package.

But you can still enable it through this NPM package: https://www.npmjs.com/package/@electron/remote

All I had to do after installing that package was:

In my main.js:

require("@electron/remote/main").initialize();
require("@electron/remote/main").enable(win.webContents);

And then in my renderer process index.js:

const systemPreferences = require('@electron/remote').systemPreferences;

Finally!