如何修复Electron应用中Uncaught ReferenceError: require is not defined错误

我之前开发Electron应用时也碰到过这个问题，主要是Electron的安全策略默认禁用了Node.js集成，再加上remote模块的版本变更导致的。给你几个切实可行的修复方案，你可以根据自己的Electron版本来选择：

方案一：针对Electron 14.x以下版本（内置remote模块） #

Electron从5.x版本开始默认关闭了nodeIntegration（Node.js集成），同时remote模块也默认禁用，所以你需要在主进程创建窗口时手动开启这两个配置：

1. 打开你的主进程文件（一般是main.js），修改BrowserWindow的配置：

const { BrowserWindow } = require('electron');

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 开启Node.js集成，让渲染进程能使用require
      nodeIntegration: true,
      // 启用remote模块
      enableRemoteModule: true,
      // 关闭上下文隔离（新版本Electron默认开启，会阻断渲染进程访问Node.js API）
      contextIsolation: false
    }
  });

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

2. 修正你渲染进程代码里的一个错误：你把BrowserWindow写成了BrowserView，后者是用来嵌入网页的组件，不是控制窗口的对象，修改后的渲染进程代码：

const remote = require('electron').remote; 
var minimise = document.getElementById('minimise'); 
var maximise = document.getElementById('maximise'); 
var quit = document.getElementById('quit'); 

minimise.addEventListener('click', minimiseApp); 
maximise.addEventListener('click', maximiseApp); 
quit.addEventListener('click', quitApp); 

function minimiseApp() { remote.BrowserWindow.getFocusedWindow().minimize(); } 
function maximiseApp() { remote.BrowserWindow.getFocusedWindow().maximize(); } 
function quitApp() { remote.BrowserWindow.getFocusedWindow().close(); }

方案二：针对Electron 14.x及以上版本（remote模块移出核心） #

从Electron 14开始，官方把remote模块从核心包移到了@electron/remote独立包，需要额外安装和配置：

1. 先安装@electron/remote包：

npm install @electron/remote

2. 在主进程文件里初始化并启用remote模块：

const { app, BrowserWindow } = require('electron');
// 初始化@electron/remote模块
require('@electron/remote/main').initialize();

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 给当前窗口启用remote功能
  require('@electron/remote/main').enable(mainWindow.webContents);
  mainWindow.loadFile('index.html');
};

app.whenReady().then(createWindow);

3. 修改渲染进程代码，引用@electron/remote并修正窗口对象：

// 改成引用@electron/remote
const remote = require('@electron/remote'); 
var minimise = document.getElementById('minimise'); 
var maximise = document.getElementById('maximise'); 
var quit = document.getElementById('quit'); 

minimise.addEventListener('click', minimiseApp); 
maximise.addEventListener('click', maximiseApp); 
quit.addEventListener('click', quitApp); 

// 修正为BrowserWindow
function minimiseApp() { remote.BrowserWindow.getFocusedWindow().minimize(); } 
function maximiseApp() { remote.BrowserWindow.getFocusedWindow().maximize(); } 
function quitApp() { remote.BrowserWindow.getFocusedWindow().close(); }

更安全的替代方案：使用预加载脚本（推荐） #

上面的方案关闭了上下文隔离，虽然简单但存在安全风险。如果你想遵循Electron的安全最佳实践，可以用预加载脚本+IPC通信的方式：

1. 创建预加载脚本preload.js：

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

// 向渲染进程暴露安全的API
contextBridge.exposeInMainWorld('electronAPI', {
  minimiseWindow: () => ipcRenderer.send('minimise-window'),
  maximiseWindow: () => ipcRenderer.send('maximise-window'),
  quitWindow: () => ipcRenderer.send('quit-window')
});

2. 在主进程里配置预加载脚本并监听IPC事件：

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

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 开启上下文隔离（默认开启）
      contextIsolation: true,
      // 指定预加载脚本
      preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWindow.loadFile('index.html');
};

// 监听渲染进程发来的窗口控制指令
ipcMain.on('minimise-window', () => {
  BrowserWindow.getFocusedWindow().minimize();
});

ipcMain.on('maximise-window', () => {
  BrowserWindow.getFocusedWindow().maximize();
});

ipcMain.on('quit-window', () => {
  app.quit();
});

app.whenReady().then(createWindow);

3. 渲染进程代码直接调用暴露的API，不需要使用require：

var minimise = document.getElementById('minimise'); 
var maximise = document.getElementById('maximise'); 
var quit = document.getElementById('quit'); 

minimise.addEventListener('click', () => window.electronAPI.minimiseWindow()); 
maximise.addEventListener('click', () => window.electronAPI.maximiseWindow()); 
quit.addEventListener('click', () => window.electronAPI.quitWindow()); 

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