Skip to content Skip to sidebar Skip to footer

Unable To Use Node.js Apis In Renderer Process

Unable to use any electron or node related operations in electron . Getting error process not defined. I Checked at various places they guide to add node Support but that is alrea

Solution 1:

Update: the answer below is a workaround. You should not disable contextIsolation and you should not enable nodeIntegration. Instead you should use a preload script and the contextBridge API.

In Electron 12, contextIsolation is now by default true

If you set it to false, you will have access to Node.js APIs in the renderer process

functioncreateWindow() {
  const win = newBrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { 
     contextIsolation: false,
     nodeIntegration: true
    },
  });

  win.loadFile("index.html");
}

⚠️ It's important to note that this is not recommended!

There's a good reason why Electron maintainers changed the default value. See this discussion

Without contextIsolation any code running in a renderer process can quite easily reach into Electron internals or your preload script and perform privileged actions that you don't want arbitrary websites to be doing.

Solution 2:

There is no reason to elevate the privileges of your renderer. Any third-party scripts on that page would run with the same privileges and that's definitely not what you want.

Instead you should use a preload script which has that privilege (i.e. can use Node.js APIs by default) but keep contextIsolation=true (which is the default value anyway). If you need to share data between your preload script and your renderer script use contextBridge.

In my example I have exposed data from the preload script to the renderer script under a rather silly namespace (window.BURRITO) to make it obvious that you're in charge:

main.js

const {app, BrowserWindow} = require('electron'); //<- v13.1.7const path = require('path');

app.whenReady().then(() => {
  const preload = path.join(__dirname, 'preload.js');
  const mainWindow = newBrowserWindow({ webPreferences: { preload }});
  mainWindow.loadFile('index.html');
});

preload.js

const {contextBridge} = require('electron');

contextBridge.exposeInMainWorld('BURRITO', {
  getNodeVer: () => process.versions.node,
  getChromeVer: () => process.versions.chrome,
  getElectronVer: () => process.versions.electron
});

renderer.js

constonClick = (sel, fn) => document.querySelector(sel).addEventListener('click', fn);
onClick('#btn1', () =>alert(BURRITO.getNodeVer()));
onClick('#btn2', () =>alert(BURRITO.getChromeVer()));
onClick('#btn3', () =>alert(BURRITO.getElectronVer()));

index.html

<!DOCTYPE html><html><head><metacharset="UTF-8"></head><body><buttonid="btn1">Node?</button><buttonid="btn2">Chrome?</button><buttonid="btn3">Electron?</button><scriptsrc="./renderer.js"></script></body></html>

enter image description here

Post a Comment for "Unable To Use Node.js Apis In Renderer Process"