Electron报错：MessageChannelMain非构造函数及preload脚本异常求助

错误根源 #

两个错误的核心原因都是Electron版本过低：

• MessageChannelMain 是Electron 10.0.0才引入的主进程API，低于此版本会返回undefined，无法作为构造函数使用。
• contextBridge 在Electron 12.0.0才正式稳定，且仅当contextIsolation开启时才能正常访问，低版本中该模块不存在或无法工作。

解决方案 #

1. 升级Electron版本 #

先检查当前Electron版本：

npm list electron
# Yarn用户执行：
yarn list electron

升级到至少12.x以上的稳定版本（推荐最新LTS版本）：

npm install electron@latest --save-dev
# Yarn用户执行：
yarn add electron@latest --dev

升级后清理依赖环境，避免缓存问题：

rm -rf node_modules package-lock.json
npm install

2. 修正主进程代码（调整端口通信时机） #

确保在页面加载完成后再发送端口，避免页面未就绪导致的异常：

function init_window(){
    if ( mainWindow == null ) {
        mainWindow = create_window();
        
        // 等待页面加载完成后处理端口通信
        mainWindow.webContents.on('did-finish-load', () => {
            const {port1, port2} = new MessageChannelMain();
            port2.postMessage({ test: 21 })
            port2.on('message', (event) => {
                console.log('from renderer main world:', event.data)
            });
            port2.start();

            mainWindow.webContents.postMessage('main-world-port', null, [port1])
        });

        load_window(); // 调用mainWindow.loadURL(myURL);

        mainWindow.on('closed', function(event) {
          mainWindow = null;
        });

        mainWindow.webContents.on("did-fail-load", function(event) {
            
        })
    }
}

function create_window() {
    return new BrowserWindow({
        width: 1200,
        height: 800,
        darkTheme: true,
        webPreferences: {
            contextIsolation: true,
            preload: path.join(__dirname, 'preload.js'),
        },
    });
}

3. 确认preload脚本配置 #

你的preload脚本代码本身无问题，升级Electron版本后contextBridge会正常可用。保持webPreferences中contextIsolation: true的配置（Electron 12+默认开启，显式声明更安全）。

验证 #

重启应用后：

• MessageChannelMain 可正常创建实例，不再抛出构造函数错误。
• contextBridge.exposeInMainWorld 能成功将API暴露给渲染进程，不再出现undefined错误。

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