从require is not defined说起Electron 渲染进程的隔离墙如果你正在用 Electron 打包一个跨平台桌面客户端比如一个股票实时看板某天在 Vue 组件里写下const { ipcRenderer } require(electron)控制台大概率会甩给你一句Uncaught ReferenceError: require is not defined这不是你代码写错了而是新版 Electron 默认开启了contextIsolation渲染进程被关进了沙盒Node.js 的require和 CommonJS 模块系统在渲染层被物理切断。这个报错本身不复杂但它背后牵扯的是主进程、预加载脚本、渲染进程三者的通信结构。本文从排障视角出发把这个问题拆开同时演示如何借助 TaoToken官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 统一接入多个模型让 Codex 对照你的main.js、preload.js和DetailWindow.vue生成符合contextBridge规范的修复代码。需要先说明一点把 Codex 的 Base URL 改到 TaoToken并不能直接让require is not defined消失。这个报错是 Electron 运行时行为不是模型调用问题。TaoToken 在这里的价值是让你用一个 Key 接入多个模型把完整的项目结构和报错上下文交给 Codex让它帮你生成正确的preload.js暴露逻辑和渲染层调用方式而不是靠猜。一、原问题与场景报错到底卡在哪一层先还原现场。项目结构大致如下quant-desktop-dashboard/ ├── main.js # 主进程 ├── preload.js # 预加载脚本 ├── package.json └── src/ └── components/ └── DetailWindow.vue # 副窗口渲染组件main.js里创建窗口时webPreferences配置是webPreferences: { nodeIntegration: false, contextIsolation: true, preload: path.join(__dirname, preload.js) }然后在DetailWindow.vue的script setup里有人写了这样一行import { ipcRenderer } from electron; // 或者 const { ipcRenderer } require(electron);两种写法都会出问题。require在渲染进程不存在直接报require is not defined而import ... from electron在 Vite 打包环境下要么解析失败要么拿到一个空对象运行时ipcRenderer是undefined。根因很明确contextIsolation: true时渲染进程运行在一个独立的 JavaScript 上下文中和 preload 脚本的上下文是隔离的。渲染层拿不到 Node.js 的require也拿不到 Electron 的原生模块。这是安全设计不是 bug。正确的路径只有一条在preload.js里用contextBridge.exposeInMainWorld暴露一个受控的 API渲染层通过window.electronAPI调用。问题在于很多人知道这个结论但落到自己的项目里main.js、preload.js、DetailWindow.vue三个文件的参数怎么对齐、事件名怎么统一、回调怎么传还是容易写错。这时候把三个文件的结构和报错一起交给 Codex让它生成一版可对照的修复代码比反复翻文档快得多。二、TaoToken 前置拿 Key、配 Base URL在把项目交给 Codex 之前先完成 TaoToken 的接入准备。打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 注册并登录后进入控制台。在 API Keys 页面创建一个新的 Key复制保存。这个 Key 就是后续所有模型调用的凭证。TaoToken 的 API 端点统一为https://taotoken.net/api注意这个地址在配置 Codex 或任何兼容 OpenAI 协议的工具时填在 Base URL 位置。Key 填在 API Key 位置。模型 ID 根据你在 TaoToken 控制台里选择的模型来填比如gpt-4o、claude-sonnet-4-20250514等具体以控制台模型列表为准。如果你用的是 Claude Code配置方式不同走的是settings.json里的ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY如果你用的是 Codex走的是config.toml。本文场景以 Codex 为主下面给出可复制的配置。需要强调的是TaoToken 在这里的角色是模型接入层不是 Electron 的替代品也不改变 Electron 的运行时行为。它的作用是让你在一个 Key 下切换多个模型把 Electron 三文件结构和报错上下文完整投喂给 Codex获得针对性的修复建议。三、可复制配置Codex 的 config.toml 与项目文件对照3.1 Codex 侧配置Codex 的配置文件通常位于~/.codex/config.tomlLinux/macOS或%USERPROFILE%\.codex\config.tomlWindows。写入以下内容model gpt-4o model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY然后在环境变量里设置export TAOTOKEN_API_KEYYOUR_API_KEYWindows PowerShell$env:TAOTOKEN_API_KEYYOUR_API_KEY配置完成后Codex 的请求会走 TaoToken 的 API 端点由 TaoToken 转发到你指定的模型。这样你在排查 Electron 问题时可以在不同模型之间切换对比它们对contextBridge和 IPC 结构的理解。3.2 把项目结构交给 Codex在项目根目录启动 Codex把以下信息一次性提供给它main.js中BrowserWindow的webPreferences配置preload.js当前内容如果有DetailWindow.vue中触发报错的代码段完整报错信息Uncaught ReferenceError: require is not defined你的目标在保持contextIsolation: true的前提下让副窗口能接收主进程推送的股票代码并重绘 ECharts一个有效的提问示例我的 Electron 项目在渲染进程报 require is not defined。 main.js 中 contextIsolation: truenodeIntegration: false preload 已配置。DetailWindow.vue 里我写了 const { ipcRenderer } require(electron) 来监听主进程消息。 请对照我的 main.js / preload.js / DetailWindow.vue 结构 生成用 contextBridge 暴露 window.electronAPI 的修复代码 保持 contextIsolation: true不要建议开启 nodeIntegration。Codex 拿到这些上下文后会生成一版preload.js核心结构如下const { contextBridge, ipcRenderer } require(electron); contextBridge.exposeInMainWorld(electronAPI, { openStockDetail: (stockCode) { ipcRenderer.send(open-stock-detail, stockCode); }, onRenderChartData: (callback) { ipcRenderer.on(render-chart-data, (event, ...args) callback(...args)); } });对应的DetailWindow.vue中原来的require调用被替换为onMounted(() { if (window.electronAPI) { window.electronAPI.onRenderChartData((symbol) { renderStockChart(symbol); }); } });main.js中ipcMain.on(open-stock-detail, ...)的逻辑保持不变事件名open-stock-detail和render-chart-data在三个文件之间必须完全一致。Codex 在生成代码时会帮你检查这些事件名是否对齐。四、验证请求与成功结果配置完成后按以下步骤验证。第一步确认 Codex 能正常调用 TaoToken。在终端执行一次简单请求或者在 Codex 交互界面里问一个与项目无关的问题比如“解释一下 Electron 的 contextIsolation”。如果返回正常说明 Base URL 和 Key 配置无误。第二步把修复后的preload.js和DetailWindow.vue保存重启 Electron 应用npm run dev # 另一个终端 npm run start第三步在主窗口双击某只股票观察终端日志。预期输出[主进程] 收到主窗口指令要求展示股票分时详情代码: 300750.SZ [主进程] 子窗口 Web 内容 ready-to-show 事件触发 [子窗口] 监听到主进程发来的重绘指令目标股票: 300750.SZ如果副窗口正常弹出ECharts 分时图渲染成功且控制台不再出现require is not defined说明contextBridge暴露的window.electronAPI已经生效渲染层通过受控 API 完成了 IPC 通信。第四步回到 Codex把成功日志贴回去让它确认修复方案与你的项目结构一致。如果还有边界情况比如窗口关闭后 ECharts 未销毁导致内存泄漏可以继续让 Codex 对照onUnmounted生命周期生成myChart.dispose()的补充代码。五、本篇常见错排查错误一window.electronAPI是undefined说明preload.js没有正确加载或者contextBridge.exposeInMainWorld的调用时机有问题。检查main.js中preload路径是否指向正确的文件检查preload.js是否在文件顶部就执行了exposeInMainWorld而不是包裹在某个未触发的函数里。错误二事件名不一致导致回调不触发main.js里ipcMain.on(open-stock-detail, ...)preload.js里ipcRenderer.send(open-stock-detail, ...)DetailWindow.vue里监听render-chart-data。三个事件名必须严格对应。Codex 在生成代码时如果用了不同命名需要手动统一。错误三在preload.js里直接暴露ipcRenderer实例// 错误做法 contextBridge.exposeInMainWorld(ipcRenderer, ipcRenderer);这等于把整个 IPC 通道暴露给渲染层失去了contextBridge的白名单保护意义。正确做法是只暴露具体的函数如openStockDetail和onRenderChartData。错误四试图通过开启nodeIntegration: true绕过报错这确实能让require在渲染进程可用但会引入 XSS 提权风险且与contextIsolation: true冲突。不要这样做。报错的正确解法是走preloadcontextBridge不是关掉安全开关。错误五Codex 返回的代码与项目版本不匹配Electron 25.x 和更早版本在contextBridgeAPI 上基本一致但如果你用的是 Electron 28某些废弃 API 会有变化。在提问时把package.json里的electron版本号一并提供给 Codex让它按你的版本生成代码。六、语义一致把模型接入落到具体排障动作上回到标题的问题把 Codex 的 Base URL 改到 TaoToken 之后require is not defined能解吗直接答案是Base URL 的修改本身不触碰 Electron 运行时报错不会因为换了 API 端点而消失。但 TaoToken 让你用一个 Key 接入多个模型把main.js、preload.js、DetailWindow.vue的完整结构和报错上下文交给 Codex让它生成符合contextBridge规范的修复代码。真正解决报错的是preload.js里正确的exposeInMainWorld调用和渲染层对window.electronAPI的调用。如果你在配置 Codex 的config.toml或环境变量时遇到问题可以查阅 TaoToken 的接入文档或者在 API Keys 页面确认 Key 的状态。如果你需要长期在 Electron、Vue、ECharts 这类跨平台桌面项目里做编码和排障可以考虑 TaoToken 的 Coding Plan把模型调用统一到一个入口下减少在多个平台之间切换配置的成本。具体操作路径创建 Key、查看模型列表https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite接入文档与配置说明https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite模型对话验证https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite长期编码方案https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewriteElectron 的contextIsolation是一堵必要的墙require is not defined是这堵墙在提醒你走preload通道。把项目结构交给 Codex让它帮你把contextBridge的暴露逻辑写对比反复试错快。
从require is not defined说起Electron 渲染进程的隔离墙如果你正在用 Electron 打包一个跨平台桌面客户端比如一个股票实时看板某天在 Vue 组件里写下const { ipcRenderer } require(electron)控制台大概率会甩给你一句Uncaught ReferenceError: require is not defined这不是你代码写错了而是新版 Electron 默认开启了contextIsolation渲染进程被关进了沙盒Node.js 的require和 CommonJS 模块系统在渲染层被物理切断。这个报错本身不复杂但它背后牵扯的是主进程、预加载脚本、渲染进程三者的通信结构。本文从排障视角出发把这个问题拆开同时演示如何借助 TaoToken官网https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 统一接入多个模型让 Codex 对照你的main.js、preload.js和DetailWindow.vue生成符合contextBridge规范的修复代码。需要先说明一点把 Codex 的 Base URL 改到 TaoToken并不能直接让require is not defined消失。这个报错是 Electron 运行时行为不是模型调用问题。TaoToken 在这里的价值是让你用一个 Key 接入多个模型把完整的项目结构和报错上下文交给 Codex让它帮你生成正确的preload.js暴露逻辑和渲染层调用方式而不是靠猜。一、原问题与场景报错到底卡在哪一层先还原现场。项目结构大致如下quant-desktop-dashboard/ ├── main.js # 主进程 ├── preload.js # 预加载脚本 ├── package.json └── src/ └── components/ └── DetailWindow.vue # 副窗口渲染组件main.js里创建窗口时webPreferences配置是webPreferences: { nodeIntegration: false, contextIsolation: true, preload: path.join(__dirname, preload.js) }然后在DetailWindow.vue的script setup里有人写了这样一行import { ipcRenderer } from electron; // 或者 const { ipcRenderer } require(electron);两种写法都会出问题。require在渲染进程不存在直接报require is not defined而import ... from electron在 Vite 打包环境下要么解析失败要么拿到一个空对象运行时ipcRenderer是undefined。根因很明确contextIsolation: true时渲染进程运行在一个独立的 JavaScript 上下文中和 preload 脚本的上下文是隔离的。渲染层拿不到 Node.js 的require也拿不到 Electron 的原生模块。这是安全设计不是 bug。正确的路径只有一条在preload.js里用contextBridge.exposeInMainWorld暴露一个受控的 API渲染层通过window.electronAPI调用。问题在于很多人知道这个结论但落到自己的项目里main.js、preload.js、DetailWindow.vue三个文件的参数怎么对齐、事件名怎么统一、回调怎么传还是容易写错。这时候把三个文件的结构和报错一起交给 Codex让它生成一版可对照的修复代码比反复翻文档快得多。二、TaoToken 前置拿 Key、配 Base URL在把项目交给 Codex 之前先完成 TaoToken 的接入准备。打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 注册并登录后进入控制台。在 API Keys 页面创建一个新的 Key复制保存。这个 Key 就是后续所有模型调用的凭证。TaoToken 的 API 端点统一为https://taotoken.net/api注意这个地址在配置 Codex 或任何兼容 OpenAI 协议的工具时填在 Base URL 位置。Key 填在 API Key 位置。模型 ID 根据你在 TaoToken 控制台里选择的模型来填比如gpt-4o、claude-sonnet-4-20250514等具体以控制台模型列表为准。如果你用的是 Claude Code配置方式不同走的是settings.json里的ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY如果你用的是 Codex走的是config.toml。本文场景以 Codex 为主下面给出可复制的配置。需要强调的是TaoToken 在这里的角色是模型接入层不是 Electron 的替代品也不改变 Electron 的运行时行为。它的作用是让你在一个 Key 下切换多个模型把 Electron 三文件结构和报错上下文完整投喂给 Codex获得针对性的修复建议。三、可复制配置Codex 的 config.toml 与项目文件对照3.1 Codex 侧配置Codex 的配置文件通常位于~/.codex/config.tomlLinux/macOS或%USERPROFILE%\.codex\config.tomlWindows。写入以下内容model gpt-4o model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY然后在环境变量里设置export TAOTOKEN_API_KEYYOUR_API_KEYWindows PowerShell$env:TAOTOKEN_API_KEYYOUR_API_KEY配置完成后Codex 的请求会走 TaoToken 的 API 端点由 TaoToken 转发到你指定的模型。这样你在排查 Electron 问题时可以在不同模型之间切换对比它们对contextBridge和 IPC 结构的理解。3.2 把项目结构交给 Codex在项目根目录启动 Codex把以下信息一次性提供给它main.js中BrowserWindow的webPreferences配置preload.js当前内容如果有DetailWindow.vue中触发报错的代码段完整报错信息Uncaught ReferenceError: require is not defined你的目标在保持contextIsolation: true的前提下让副窗口能接收主进程推送的股票代码并重绘 ECharts一个有效的提问示例我的 Electron 项目在渲染进程报 require is not defined。 main.js 中 contextIsolation: truenodeIntegration: false preload 已配置。DetailWindow.vue 里我写了 const { ipcRenderer } require(electron) 来监听主进程消息。 请对照我的 main.js / preload.js / DetailWindow.vue 结构 生成用 contextBridge 暴露 window.electronAPI 的修复代码 保持 contextIsolation: true不要建议开启 nodeIntegration。Codex 拿到这些上下文后会生成一版preload.js核心结构如下const { contextBridge, ipcRenderer } require(electron); contextBridge.exposeInMainWorld(electronAPI, { openStockDetail: (stockCode) { ipcRenderer.send(open-stock-detail, stockCode); }, onRenderChartData: (callback) { ipcRenderer.on(render-chart-data, (event, ...args) callback(...args)); } });对应的DetailWindow.vue中原来的require调用被替换为onMounted(() { if (window.electronAPI) { window.electronAPI.onRenderChartData((symbol) { renderStockChart(symbol); }); } });main.js中ipcMain.on(open-stock-detail, ...)的逻辑保持不变事件名open-stock-detail和render-chart-data在三个文件之间必须完全一致。Codex 在生成代码时会帮你检查这些事件名是否对齐。四、验证请求与成功结果配置完成后按以下步骤验证。第一步确认 Codex 能正常调用 TaoToken。在终端执行一次简单请求或者在 Codex 交互界面里问一个与项目无关的问题比如“解释一下 Electron 的 contextIsolation”。如果返回正常说明 Base URL 和 Key 配置无误。第二步把修复后的preload.js和DetailWindow.vue保存重启 Electron 应用npm run dev # 另一个终端 npm run start第三步在主窗口双击某只股票观察终端日志。预期输出[主进程] 收到主窗口指令要求展示股票分时详情代码: 300750.SZ [主进程] 子窗口 Web 内容 ready-to-show 事件触发 [子窗口] 监听到主进程发来的重绘指令目标股票: 300750.SZ如果副窗口正常弹出ECharts 分时图渲染成功且控制台不再出现require is not defined说明contextBridge暴露的window.electronAPI已经生效渲染层通过受控 API 完成了 IPC 通信。第四步回到 Codex把成功日志贴回去让它确认修复方案与你的项目结构一致。如果还有边界情况比如窗口关闭后 ECharts 未销毁导致内存泄漏可以继续让 Codex 对照onUnmounted生命周期生成myChart.dispose()的补充代码。五、本篇常见错排查错误一window.electronAPI是undefined说明preload.js没有正确加载或者contextBridge.exposeInMainWorld的调用时机有问题。检查main.js中preload路径是否指向正确的文件检查preload.js是否在文件顶部就执行了exposeInMainWorld而不是包裹在某个未触发的函数里。错误二事件名不一致导致回调不触发main.js里ipcMain.on(open-stock-detail, ...)preload.js里ipcRenderer.send(open-stock-detail, ...)DetailWindow.vue里监听render-chart-data。三个事件名必须严格对应。Codex 在生成代码时如果用了不同命名需要手动统一。错误三在preload.js里直接暴露ipcRenderer实例// 错误做法 contextBridge.exposeInMainWorld(ipcRenderer, ipcRenderer);这等于把整个 IPC 通道暴露给渲染层失去了contextBridge的白名单保护意义。正确做法是只暴露具体的函数如openStockDetail和onRenderChartData。错误四试图通过开启nodeIntegration: true绕过报错这确实能让require在渲染进程可用但会引入 XSS 提权风险且与contextIsolation: true冲突。不要这样做。报错的正确解法是走preloadcontextBridge不是关掉安全开关。错误五Codex 返回的代码与项目版本不匹配Electron 25.x 和更早版本在contextBridgeAPI 上基本一致但如果你用的是 Electron 28某些废弃 API 会有变化。在提问时把package.json里的electron版本号一并提供给 Codex让它按你的版本生成代码。六、语义一致把模型接入落到具体排障动作上回到标题的问题把 Codex 的 Base URL 改到 TaoToken 之后require is not defined能解吗直接答案是Base URL 的修改本身不触碰 Electron 运行时报错不会因为换了 API 端点而消失。但 TaoToken 让你用一个 Key 接入多个模型把main.js、preload.js、DetailWindow.vue的完整结构和报错上下文交给 Codex让它生成符合contextBridge规范的修复代码。真正解决报错的是preload.js里正确的exposeInMainWorld调用和渲染层对window.electronAPI的调用。如果你在配置 Codex 的config.toml或环境变量时遇到问题可以查阅 TaoToken 的接入文档或者在 API Keys 页面确认 Key 的状态。如果你需要长期在 Electron、Vue、ECharts 这类跨平台桌面项目里做编码和排障可以考虑 TaoToken 的 Coding Plan把模型调用统一到一个入口下减少在多个平台之间切换配置的成本。具体操作路径创建 Key、查看模型列表https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite接入文档与配置说明https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite模型对话验证https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite长期编码方案https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewriteElectron 的contextIsolation是一堵必要的墙require is not defined是这堵墙在提醒你走preload通道。把项目结构交给 Codex让它帮你把contextBridge的暴露逻辑写对比反复试错快。
