Electron渲染进程调用require报错无法引入Node.js模块如何解决

问题根源 #

你遇到的报错是因为Electron v12及以上版本默认开启contextIsolation（上下文隔离），该配置优先级高于nodeIntegration，即便你手动开启了nodeIntegration，只要上下文隔离处于开启状态，渲染进程的JS运行环境和Node.js环境就是隔离的，自然无法调用require等Node.js API。

方案1：临时快速修复（仅本地测试用，不推荐生产环境） #

直接在主进程创建窗口的webPreferences配置中关闭上下文隔离即可，修改后的配置如下：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false // 新增这行，关闭上下文隔离
  }
});

注意：该方案存在严重安全隐患，若渲染进程会加载外部网页、执行不可信的第三方代码，绝对不要使用该方案。

方案2：官方推荐标准方案（安全合规，推荐使用） #

Electron官方不建议直接在渲染进程开启完整Node.js权限，正确做法是通过预加载脚本（preload）仅向渲染进程暴露业务需要的API，步骤如下：

1. 新建预加载脚本preload.js，代码如下：

const { contextBridge } = require('electron');
const { readFile } = require('fs');
const path = require('path');

// 仅向渲染进程暴露需要的方法，不要暴露完整的fs模块
contextBridge.exposeInMainWorld('electronAPI', {
  readFooTxt: (callback) => {
    // 用绝对路径读取文件，避免相对路径匹配错误
    const targetPath = path.resolve(__dirname, './foo.txt');
    readFile(targetPath, callback);
  }
});

2. 修改主进程的窗口配置，关联预加载脚本：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    contextIsolation: true, // 保持默认开启，更安全
    nodeIntegration: false, // 关闭不需要的Node.js集成
    preload: path.join(__dirname, 'preload.js') // 关联预加载脚本
  }
});

3. 修改渲染进程的test.js代码，直接调用预加载脚本暴露的方法即可：

window.electronAPI.readFooTxt((err, source) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(source);
});

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