如何在Nextron（Electron.js+Next.js）中启用上下文隔离？

问题原因 #

开启contextIsolation: true后，Electron会隔离主进程与渲染进程的上下文，渲染进程无法直接访问Node.js的global变量，但Webpack、React Refresh等构建工具的运行时代码会尝试读取该变量，从而抛出未定义错误。

解决步骤 #

1. 配置Webpack注入global变量 #

在项目根目录创建/修改next.config.js，通过Webpack的ProvidePlugin将global指向window：

module.exports = {
  webpack: (config) => {
    config.plugins.push(
      new require('webpack').ProvidePlugin({
        global: 'window'
      })
    );
    return config;
  }
};

2. 正确配置BrowserWindow的上下文隔离 #

在主进程文件（如main/background.js）中，确保contextIsolation设为true，同时指定preload脚本路径：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWindow.loadURL('http://localhost:8888');
}

app.whenReady().then(createWindow);

3. 编写preload脚本（按需暴露主进程API） #

如果需要让渲染进程访问主进程功能，创建main/preload.js，通过contextBridge安全暴露API：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (message) => ipcRenderer.send('message', message),
  onMessage: (callback) => ipcRenderer.on('message', (_event, data) => callback(data))
});

渲染进程可通过window.electronAPI调用暴露的方法，避免直接操作Node.js API。

4. 验证配置 #

重启开发服务器，global is not defined错误会消失，同时上下文隔离保持启用状态。

关键说明 #

• Nextron基于Next.js，Webpack配置需通过next.config.js修改，不可直接修改Electron默认Webpack配置。
• 启用上下文隔离后，必须通过preload脚本+contextBridge实现主进程与渲染进程的通信，禁止在渲染进程中直接使用Node.js API。

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