Uncaught Error: @electron/remote is disabled for this WebContents

Question

I was developing a desktop app using React with Electron js. This is the scenario: When a button is clicked, I want to close the window. Therefore I am using the @electron/remote package. I have initialized the package in the public/main.js and when I try to import it in a React component, it gives me this error in the console: Uncaught Error: @electron/remote is disabled for this WebContents. Call require("@electron/remote/main").enable(webContents) to enable it.

public/main.js:

const { app, BrowserWindow } = require("electron");
const path = require("path");
const isDev = require("electron-is-dev");

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
    },
  });

  win.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
};

app.on("ready", createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

src/FrameBar.js

import React from "react";
import "./FrameBar.css";
import logo from "./assets/Logo.png";
import { ReactComponent as Mimimize_icon } from "./assets/frame_minimize.svg";
import { ReactComponent as Maximize_icon } from "./assets/frame_maximize.svg";
import { ReactComponent as Close_icon } from "./assets/frame_close.svg";

const { app } = window.require("@electron/remote");

const FrameBar = () => {
  return (
    <div className="frameBar">
      <div className="frameBar_container">
        <div className="frameBar-cont_logo">
          <img src={logo} alt="" />
        </div>
        <div className="frameBar-cont_btns">
          <div className="frameBar-cont-btn_div">
            <Mimimize_icon />
          </div>
          <div className="frameBar-cont-btn_div">
            <Maximize_icon />
          </div>
          <div className="frameBar-cont-btn_div">
            <Close_icon />
          </div>
        </div>
      </div>
    </div>
  );
};

export default FrameBar;

Any idea why this error is coming?
Thank you!

Geneva

Answered here: https://mcmap.net/q/266663/-enableremotemodule-is-missing-from-electron-v14-typescript-type-definitions – Cockswain

I found an answer here. It helps me a lot. programmerah.com/… – Postaxial

Answer 1

This one should work till electrron version 22.

const { app, BrowserWindow} = require("electron");

require('@electron/remote/main').initialize()

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      enableRemoteModule: true,
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  require('@electron/remote/main').enable(win.webContents)
  win.loadURL('http://localhost:3000');

}

require('@electron/remote/main').enable(win.webContents) to enable WebContent!

Coniah

Answer 2

The remote module is deprecated since electron v12, and has been remove since electron v14, for security reasons. You can still use the new @electron/remote module :

const { BrowserWindow } = require('@electron/remote')
require('@electron/remote/main').initialize()

You just need to import your BrowserWindow class from @electron/remote instead of electron

Nettle

This doesn't work for BrowserWindow instances created from the Render process, at least with Electron 14.0.1. Now, remote.require("@electron/remote/main").enable(window.webContents) is also required: https://mcmap.net/q/266663/-enableremotemodule-is-missing-from-electron-v14-typescript-type-definitions – Cockswain

Answer 3

For this to work, write the following code: main.js:

const {app, BrowserWindow} = require('electron');
require('@electron/remote/main').initialize();
function createWindow () {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
       contextIsolation: false,
       nodeIntegration: true,
       enableRemoteModule: true
     }
   });
   require('@electron/remote/main').enable(mainWindow.webContents)
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
   // Open the DevTools.
   mainWindow.webContents.openDevTools()
}

renderer.js:

const remote = require("@electron/remote");
const wnd = remote.getCurrentWindow();
document.querySelector("h1").onclick = () => {
  wnd.close()
}

Resorcinol

Answer 4

So in newer version first thing u have to do is npm i @electron/remote and add this code in the main js file you should add

1. require('@electron/remote/main').initialize();

Then you add this after app.on('ready', createWindow);

2. app.on('browser-window-created', (_, window) => { require("@electron/remote/main").enable(window.webContents) });

In renderer after defining electron you should add this:

3.const { BrowserWindow } = require('@electron/remote');

And that is it, took me a while to read docs and find few solutions online, there is no much.

Cheree

Answer 5

In my case, using require("@electron/remote/main").enable(webContents) was working fine but only for my app's first (main) window. Whenever I created a second window I would run into this issue.

What fixed it for me is to enable webContents from within a browser-window-created event handler (source: this GitHub comment):

app.on('browser-window-created', (_, window) => {
    require("@electron/remote/main").enable(window.webContents)
})

Upstage