未捕获的错误：此 WebContents 禁用 @ Electron/remote

Question

我正在使用 React 和 Electron js 开发一个桌面应用程序。这是这样的场景：当单击按钮时，我想关闭窗口。因此我使用

@electron/remote

包。我已经在

public/main.js

中初始化了该包，当我尝试将其导入到 React 组件中时，它在控制台中给出了此错误：

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;

知道为什么会出现这个错误吗？
谢谢！

Answer 1

这个应该可以工作到 Electron 版本 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) 启用 WebContent！

Answer 2

出于安全原因，远程模块自 Electron v12 起已被弃用，并且自 Electron v14 起已被删除。您仍然可以使用新的 @electron/remote 模块：

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

您只需要从

BrowserWindow

而不是

@electron/remote

 导入您的 

electron

类

Answer 3

为此，请编写以下代码： 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()
}

渲染器.js：

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

Answer 4

就我而言，使用

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

工作正常，但仅适用于我的应用程序的第一个（主）窗口。每当我创建第二个窗口时，我都会遇到这个问题。

对我来说解决这个问题的是在

browser-window-created

事件处理程序中启用 webContents（来源：此 GitHub 评论）：

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

Answer 5

所以在新版本中你要做的第一件事就是在你应该添加的主js文件中添加这段代码

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

然后在 app.on('ready', createWindow); 之后添加此内容

2. app.on('浏览器窗口创建', (_, window) => { 需要（“@ Electron /远程/主”）。启用（window.webContents） });

在定义电子后的渲染器中，您应该添加以下内容：

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

就是这样，我花了一段时间阅读文档并在网上找到了一些解决方案，没有太多。