Electron渲染进程connector.js报错：无法匹配undefined或null求助

我之前处理过一模一样的问题！这个TypeError: Cannot match against 'undefined' or 'null'错误，结合你要做的自定义窗口控制功能，大概率是渲染进程无法正确访问Electron的窗口控制API，加上你没用到webpack，问题基本出在Electron的进程隔离配置和API调用方式上，给你一步步拆解解决方案：

1. 先排查Electron进程隔离的配置问题 #

从Electron 5版本开始，渲染进程默认开启了contextIsolation（上下文隔离）和禁用了nodeIntegration，这意味着你不能直接在渲染进程的connector.js里用require('electron')或者访问remote模块——如果你尝试这么做，得到的会是undefined，后续对这个值进行解构、调用方法就会触发你遇到的错误。

正确的做法是通过**预加载脚本（preload.js）**来安全暴露需要的API：

步骤1：主进程（main.js）配置BrowserWindow #

确保你创建窗口时指定了预加载脚本，并且保留上下文隔离（这是安全最佳实践）：

// main.js
const { BrowserWindow, ipcMain, app } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // 隐藏默认系统菜单栏，启用自定义标题栏
    webPreferences: {
      contextIsolation: true, // 默认开启，必须保留
      preload: path.join(__dirname, 'preload.js') // 指定预加载脚本路径
    }
  });

  mainWindow.loadFile('index.html'); // 加载你的页面
}

// 监听渲染进程发来的窗口控制指令
ipcMain.on('window-minimize', () => mainWindow.minimize());
ipcMain.on('window-maximize', () => {
  mainWindow.isMaximized() ? mainWindow.unmaximize() : mainWindow.maximize();
});
ipcMain.on('window-close', () => mainWindow.close());

app.whenReady().then(createWindow);

步骤2：预加载脚本（preload.js）暴露API #

在预加载脚本里用contextBridge把主进程的窗口控制能力暴露给渲染进程：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

// 向渲染进程的全局window对象暴露electronAPI
contextBridge.exposeInMainWorld('electronAPI', {
  minimizeWindow: () => ipcRenderer.send('window-minimize'),
  maximizeWindow: () => ipcRenderer.send('window-maximize'),
  closeWindow: () => ipcRenderer.send('window-close')
});

2. 修正connector.js中的代码逻辑 #

现在你的渲染进程可以通过window.electronAPI调用窗口控制方法了，同时要确保：

• 等待DOM加载完成后再绑定事件（jQuery的$(document).ready()）
• 先检查electronAPI是否存在，避免提前调用导致的错误

修改后的connector.js示例：

// connector.js
$(document).ready(() => {
  // 先确认API是否正常暴露
  if (!window.electronAPI) {
    console.error('electronAPI未正确加载，请检查预加载脚本配置');
    return;
  }

  // 绑定最小化按钮事件
  $('#minimize-btn').click(() => {
    window.electronAPI.minimizeWindow();
  });

  // 绑定最大化/还原按钮事件
  $('#maximize-btn').click(() => {
    window.electronAPI.maximizeWindow();
  });

  // 绑定关闭按钮事件
  $('#close-btn').click(() => {
    window.electronAPI.closeWindow();
  });
});

3. 额外排查点：检查是否有解构null/undefined的代码 #

如果上面的配置都没问题，那就要看报错栈里的具体行——错误提示里的"match against"通常是指你在尝试对一个null或undefined的值做解构（比如const { foo } = bar，而bar是undefined），或者用switch语句匹配一个不存在的值。

举个例子：如果你之前写了const { remote } = require('electron')，那remote会是undefined，解构它的BrowserWindow就会触发这个错误。

按照上面的步骤调整后，你的自定义窗口控制功能应该就能正常运行了，而且完全符合Electron的安全规范，不需要禁用上下文隔离或者使用webpack。

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