require is not defined，在Electron渲染进程中加载模块报错

最新推荐文章于 2025-06-12 11:30:02 发布

原创最新推荐文章于 2025-06-12 11:30:02 发布 · 5.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#require #electron #node #renderer

electron 专栏收录该内容

3 篇文章

订阅专栏

在Electron应用中遇到'require is not defined'错误，可能由于框架与Node.js冲突导致。解决方案包括：禁用或重命名冲突模块，设置主进程的`nodeIntegration`为`true`，或使用`preload`配置引入`renderer.js`进行进程通讯。通过这些方法，可以正常使用require并避免相关错误。

// 主进程
const {app, BrowserWindow, ipcMain} = require('electron')
app.on('ready', () => {
  // 新建窗口
  const win = new BrowserWindow()
  // 开启开发工具
  win.webContents.openDevTools()
  // 窗口加载页面
  win.loadFile('./layout/index.html')
})

//渲染进程
<script>
    const ele = require('electron')
    console.log(ele)
</script>

electron界面控制台本应该输出结果，但是控制台报错，Uncaught ReferenceError: require is not defined

解决方案一：

看看是否重命名了require如果你项目中使用了jQuery/RequireJS/Meteor/AngularJS等框架，如果使用了，就必须先禁用node特性或者在页面加载上面那些框架之前给require重命名并且删除delete window.require;delete window.exports;delete window.module;
具体解决办法如下：

// In the main process.
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
})
win.show()

或者

<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<!-- 再引入jq等框架所需js  <===把我当作注释吧 -->
<script type="text/javascript" src="jquery.js"></script>
</head>

之后在使用require的地方需要使用nodeRequire替代。

我是这样使用的

//渲染进程
<script>
    window.nodeRequire = require;
    delete window.require;
    delete window.exports;
    delete window.module;
</script>
<script>
    const ele = nodeRequire('electron')
    console.log(ele)
</script>

解决方案二：

主进程代码如下：

const {app, BrowserWindow, ipcMain} = require('electron')
const path = require('path')
app.on('ready', function() {
  // 创建页面
  const win = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true
    }
  })
  // 开启开发者工具
  win.webContents.openDevTools()
  // 导入渲染进程
  win.loadFile('./layout/index.html')
})

渲染进程代码如下：

<script>
  const ele = require('electron')
  console.log(ele)
</script>

在原代码基础上，就增加了一句，将支持完整node改为true，即：

webPreferences: {
  nodeIntegration: true
}

代码即可正常运行，require不再报错，但是问题是，之前查了好多资料，都是提到因为要避免框架与node.js的冲突，都是建议用electron的时候将nodeIntegration禁止，而且查看文档的时候，文档提到nodeIntegration是默认为true的。

解决方案三：

1,创建renderer.js文件

global.electron = require('electron');

2,修改main.js文件
修改创建浏览器的入口代码,添加preload配置项。将renderer.js作为预加载文件。

win = new BrowserWindow({

    width: 1000,
    height: 800,
    webPreferences: {
        javascript: true,
        plugins: true,
        nodeIntegration: true, // 是否集成 Nodejs
        webSecurity: false,
        preload: path.join(__dirname, '../public/renderer.js') // 但预加载的 js 文件内仍可以使用 Nodejs 的 API
    }
})

3,在React组件中如下使用electron

const electron = window.electron;

因为要使用进程通讯，所以可以在渲染进程中直接这么写：

const ipcRenderer = window.electron.ipcRenderer;

在此时，就没有那个TypeError: fs.existsSync is not a function 的报错了。

当然了，产生这些问题的主要原用是react作为前端工程没有使用Node的环境。