electron 使用remote 报错：Cannot read properties of undefined (reading ‘BrowserWindow‘)

最近在学习electron，写了一个remote的小demo，其中有这样一段代码：

const BrowserWindow = require("electron").remote.BrowserWindow;

会报错，如下图：

 

然后去网上找了一些文章看了看貌似是版本的问题，我用的electron是@v16.0.4, 而remote在electron12的时候废弃了remote模块，所以需要我们自己安装remote包。

1.  首先在项目根目录下安装@electron/remote包：

npm install @electron/remote --save

2. 在主进程中进行初始化：

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

 3. 并在主进程webPreferences中设置enableRemoteModule和contextIsolation：

 webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true, // 使用remote模块
 },

4. 在渲染进程中设置

const BrowserWindow = require("@electron/remote").BrowserWindow;

就好了，这是我整体的代码：

主进程

var electron = require("electron");
var app = electron.app; // 引用app
var BrowserWindow = electron.BrowserWindow; // 窗口引用
var mainWindow = null; // 申明要打开的主窗口

// 当electron完成了初始化并且准备创建浏览器窗口的时候
// 此方法被调用
app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true, // 使用remote模块
    },
  });

  require("@electron/remote/main").initialize(); // 初始化
  require("@electron/remote/main").enable(mainWindow.webContents);
  mainWindow.loadFile("demo2.html"); // 加载index.html 页面
  mainWindow.openDevTools(); // 打开开发者工具

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
});

子进程

const btn = this.document.querySelector("#btn");
const BrowserWindow = require("@electron/remote").BrowserWindow;

window.onload = () => {
  btn.onclick = () => {
    newWin = new BrowserWindow({
      width: 500,
      height: 500,
    });

    newWin.loadFile("load.html");
    newWin.on("closed", () => {
      newWin = null;
    });
  };
};

结果展示