Electron.js仅浏览器端报window.require is not a function错误如何解决

根本原因 #

普通浏览器未嵌入Node.js运行时，不存在window.requireAPI，仅Electron渲染进程开启nodeIntegration配置时才会注入该API。你项目代码中存在直接调用window.require引入sqlite3等Node原生模块的逻辑，在浏览器环境执行时就会抛出报错，和React入口代码无关。

可行修复步骤 #

• 第一步：添加环境判断逻辑，区分当前运行环境是Electron还是普通浏览器
  在公共工具文件中添加判断函数：

export const isElectronEnv = () => {
  return !!(window.process?.type === 'renderer' || navigator.userAgent.includes('Electron'))
}

• 第二步：所有调用Node/Electron专属API的逻辑增加环境判断，浏览器环境下走降级Mock逻辑
  比如你引入sqlite3的代码修改为：

let sqlite3 = null
if (isElectronEnv()) {
  sqlite3 = window.require('sqlite3')
} else {
  // 浏览器调试环境下Mock sqlite3的API，返回测试数据即可
  sqlite3 = {
    // 这里补充你用到的sqlite3方法的Mock实现，比如用localStorage存储模拟数据
  }
}

所有涉及window.require、Electron专属API的调用都按这个逻辑改造，React入口代码完全不需要删除。

• 第三步（可选，更符合Electron安全规范）：使用Preload脚本暴露能力，后续可关闭nodeIntegration提升安全性

1. 新增preload.js文件，修改BrowserWindow配置：

const path = require('path')
mainWindow = new BrowserWindow({ 
  width: 900, 
  height: 680,     
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    preload: path.join(__dirname, 'preload.js')
  } 
})

2. 在preload.js中通过contextBridge暴露需要的能力：

const { contextBridge } = require('electron')
const sqlite3 = require('sqlite3')
// 封装你需要的sqlite操作方法
const db = new sqlite3.Database('./your-db-path.db')
contextBridge.exposeInMainWorld('electronAPI', {
  queryDb: (sql, params) => {
    return new Promise((resolve, reject) => {
      db.all(sql, params, (err, rows) => {
        if (err) reject(err)
        resolve(rows)
      })
    })
  }
})

3. 渲染进程中调用时同样做环境判断：

let queryDb = null
if (isElectronEnv()) {
  queryDb = window.electronAPI.queryDb
} else {
  // 浏览器调试环境Mock查询逻辑
  queryDb = async () => {
    return [/* 测试数据 */]
  }
}

调试说明 #

完成上述改造后，浏览器访问localhost:3000时会走Mock逻辑，不会触发window.require调用，可正常调试UI逻辑；Electron环境运行时会调用真实的Node原生模块能力，不影响功能。

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