React+Electron使用@electron/remote报错：WebContents未启用该模块

你只完成了@electron/remote包的全局初始化，没有给你创建的BrowserWindow对应的WebContents实例开启remote访问权限，这就是报错信息中提示需要调用enable(webContents)的核心原因。另外你配置里的enableRemoteModule: true是Electron旧版本内置remote模块的开关，对独立安装的@electron/remote包不生效，可保留也可删除。

1. 修改public/main.js中的createWindow函数，在创建BrowserWindow实例后添加enable逻辑：

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  // 新增这行，给当前窗口的WebContents启用remote权限
  require("@electron/remote/main").enable(win.webContents);

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

2. 后续实现窗口控制逻辑，可参考如下写法修改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 currentWindow = window.require("@electron/remote").getCurrentWindow();

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" onClick={() => currentWindow.minimize()}>
            <Mimimize_icon />
          </div>
          <div className="frameBar-cont-btn_div" onClick={() => {
            currentWindow.isMaximized() ? currentWindow.unmaximize() : currentWindow.maximize()
          }}>
            <Maximize_icon />
          </div>
          <div className="frameBar-cont-btn_div" onClick={() => currentWindow.close()}>
            <Close_icon />
          </div>
        </div>
      </div>
    </div>
  );
};

export default FrameBar;

你当前配置的nodeIntegration: true和contextIsolation: false存在安全风险，仅适合本地开发测试使用。如果后续要发布正式版本，建议关闭这两个配置，改用Electron的IPC通信机制实现窗口控制功能，安全性更高。

内容的提问来源于stack exchange，提问作者Ajit Kumar