Electron+Next.js开启contextIsolation后preload脚本报require未定义

问题根因 #

你遇到的require is not defined报错与主进程的nodeIntegration配置无关，是由于Next.js的打包工具将仅Node环境可用的CommonJS语法打包进了仅浏览器环境运行的渲染层代码导致的。contextIsolation: true的配置下，渲染进程上下文默认不会注入任何Node.js相关API，就算开了nodeIntegration也不会生效。

解决方案 #

1. 修正主进程冗余配置
   你当前开启的nodeIntegration: true没有任何作用，反而有安全风险，直接改为false即可：

// create-window.ts中的webPreferences配置
webPreferences: {
  nodeIntegration: false,
  contextIsolation: true,
  preload: path.join(__dirname, '..', 'preload.js'),
  ...options.webPreferences,
},

2. 调整Next.js打包配置
   在next.config.js中添加配置，让webpack排除对Electron相关依赖的前端打包处理：

// next.config.js完整配置参考
module.exports = {
  webpack: (config, { isServer }) => {
    config.output.globalObject = 'this';
    // 非服务端渲染时，将electron标记为外部依赖，不打包进前端产物
    if (!isServer) {
      config.externals = config.externals || [];
      config.externals.push('electron');
    }
    return config;
  }
}

3. 调整preload脚本存放与打包规则
   preload脚本是运行在Electron独立上下文的Node脚本，不能放在Next.js的渲染层代码目录（一般nextron项目的renderer目录）下，建议移到主进程代码目录（一般为main目录），同时在electron-builder的配置中添加preload脚本的打包规则，确保打包后路径正确：

// package.json中的electron-builder配置参考
"build": {
  "files": [
    "main/**/*",
    "preload.js", // 单独添加preload脚本的打包规则
    "renderer/out/**/*"
  ]
}

4. 渲染层调用规范
   渲染层所有和Electron主进程的交互都通过preload暴露的window.api调用，不要在渲染层代码中import/require任何Electron相关的包：

// 渲染层调用示例
const handleSelectFolder = async () => {
  try {
    const selectedPath = await window.api.selectFolderPopup();
    // 后续处理逻辑
  } catch (err) {
    // 用户取消选择或者出现错误的处理逻辑
  }
}

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