electron使用remote报错：Uncaught TypeError: Cannot read property ‘BrowserWindow‘ of undefined

1、场景

在学习electron，父窗口打开子窗口，使用remote模块的时候，出现了以下的问题：

const BrowserWindow = require('electron').remote.BrowserWindow

ctrl+shift+i快捷键打开右边调试模式窗口。

2、报错

Uncaught TypeError: Cannot read property 'BrowserWindow' of undefined

 3、原因分析

1、新安装的electron，版本都是14+的版本，像我下载的都是16+的版本。但是14+的版本， electron团队在electron12的时候废弃了remote模块，更是在14后移除了这个模块 需要自行下载 remote包。由@electron/remote模块替代。

2、electron10中，enableRemoteModule默认值改为了false，使用remote模块需要改为true，同时contextIsolation设置为false。

4、解决方案

1、首先在自己项目中npm安装 @electron/remote模块

        

npm install --save @electron/remote

2、在主进程初始化@electron/remote模块，然后在渲染中使用

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

 3、在主进程main.js中，设置remote模块，在webPreferences中添加enableRemoteModule:true 和 contextIsolation为false。

webPreferences:{ 
    nodeIntegration:true,
    enableRemoteModule: true,
    contextIsolation: false
}

4、渲染进程中，require('electron').remote替换为require('@electron/remote')

const BrowserWindow = require('@electron/remote').BrowserWindow

注意： 如果还报下面的错：

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

 就在步骤2加上：
require('@electron/remote/main').initialize()的后面加上require('@electron/remote/main').enable(mainWindow.webContents)

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

 5、代码

主进程main.js：

var electron = require('electron')

var app = electron.app // 引用app
var BrowserWindow = electron.BrowserWindow // 窗口引用

var mainWindow = null //声明要打开的主窗口

app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:500,
        height:500,
        webPreferences:{ 
            nodeIntegration:true,
            enableRemoteModule: true,
            contextIsolation: false
        }
    })
    require('@electron/remote/main').initialize()
    require('@electron/remote/main').enable(mainWindow.webContents)
    mainWindow.loadFile('demo2.html') // 加载html
    mainWindow.on('closed',()=>{
        mainWindow = null
    })
})

渲染进程demo2.js：

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

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

        newWin.loadFile('yellow.html')
        newWin.on('close',()=>{
            newWin = null
        })
    }
}

6、效果

7、推荐

 推荐几个学习网站：

1. electron中文文档
2. electron文档中心
3. 技术胖Electron 免费视频教程
4. electron码云开源项目
5. 一个基于 electron-vue 开发的音乐播放器
6. 分类 Electron 下的文章