时间戳

首页 > 解决方案 > 未捕获的错误：此 WebContents 禁用了 @electron/remote

reactjs - 未捕获的错误：此 WebContents 禁用了 @electron/remote

问题描述

我正在使用 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;

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

标签： reactjselectron

解决方案

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

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

你只需要导入你的BrowserWindow类@electron/remote而不是electron

推荐阅读