Electron下WebPack打包React项目报require未定义错误如何解决

根因分析 #

• 代码运行逻辑冲突：使用babel-standalone在浏览器端实时编译JSX代码时，会将ES6的import语法转译为CommonJS规范的require调用，但浏览器原生环境没有内置require方法，所以直接抛出未定义错误
• Electron配置缺失：高版本Electron默认开启contextIsolation上下文隔离，仅开启nodeIntegration的话，隔离状态下渲染进程依然拿不到Node.js的API，require自然不可用
• 冗余重复引入：你已经通过CDN全局引入了React、ReactDOM，代码里又重复import，就算解决require问题也会出现变量冲突

分步修复方案 #

第一步：修正Electron窗口配置 #

把BrowserWindow的webPreferences配置补全，显式关闭上下文隔离：

let win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false, // 必须和nodeIntegration配合生效
    enableRemoteModule: true // 用到remote模块时再加，非必需
  }
})
win.show()

第二步：调整代码引用逻辑，二选一即可 #

方案A：走Webpack打包流程（推荐，符合工程化规范）

• 删除HTML里的react、react-dom、babel-standalone三个CDN脚本引入代码
• 不要直接在HTML里引入未编译的main-panel.js，用Webpack把所有React代码打包成单文件之后，在HTML里引入打包后的产物即可，Webpack会把所有import的依赖都打包进去，不需要浏览器端处理require
• 打包完成后再加载HTML入口文件，不会再出现require相关错误

方案B：保留浏览器端实时编译逻辑（仅适合小型测试项目）

• 删除React代码开头所有的import语句，你已经通过CDN把React、ReactDOM挂载到了window全局，直接调用即可
• 本地组件App、Table、TableDropdown要么也通过script标签提前引入到HTML并挂载到全局变量，要么直接把代码合并到main-panel.js里，不要用import引入

第三步：Webpack配置校验（仅选择方案A时需要） #

• 检查Webpack的target配置是否正确，Electron渲染进程可配置target: 'electron-renderer'，会自动适配Electron环境，不需要额外处理node内置模块的打包问题
• 检查babel-loader的配置是否包含@babel/preset-react和@babel/preset-env预设，确保ES6和JSX语法被正确转译

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