electron渲染进程报错：require is not defined

发布于 2022-09-11 23:18:00 字数 538 浏览 10 评论 0

请各位大神解答：electron框架加载渲染进程时，渲染进程require报错，项目未引入其他框架

学习electron框架小练习相关代码

// 主进程
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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自我难过 2022-09-18 23:18:00

终于把问题解决了，但是仍然有疑惑，希望跟各位分享一下，也希望能得到大神的进一步解答。
先说一下，因为是学习的练习项目，文件很简单，就只有一个主进程和一个渲染进程。
主进程代码如下：

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的。
以上仍然存在的两个问题，希望等得到进一步解答，谢谢！

回复收藏 0

巾帼英雄 2022-09-18 23:18:00

你得看看是否重命名了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替代
参考 FAQ - I can not use jQuery/RequireJS/Meteor/AngularJS in Electron

你这里可以这么就修改

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

回复收藏 0

夏日落 2022-09-18 23:18:00

我的发现:
貌似需要同时配置:

webPreferences: {
  nodeIntegration: true,
  contextIsolation: false,
}

回复收藏 0

老旧海报 2022-09-18 23:18:00

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 的报错了。

方案2：
1，修改index.html:

window.electron = require('electron');

</script>
<div id="root"></div>
2，main.js:

win = new BrowserWindow({

    width: 1000,
    height: 800,
    webPreferences: {
        nodeIntegration: true, // 是否集成 Nodejs,把之前预加载的js去了，发现也可以运行
    }
})

3，渲染进程这么写：
getName = (e) =>{

    e.preventDefault()
    const ipcRenderer = window.electron.ipcRenderer;
    // console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

    // ipcRenderer.on('asynchronous-reply', (event, arg) => {
    //     console.log(arg) // prints "pong"
    // })
    ipcRenderer.send('asynchronous-message', 'ping')
    // ipcRenderer.send('get-reader-list', '')
}

试了一个最简单的方法：
渲染进程直接可以这么写， <script>

    const ipcRenderer = require('electron').ipcRenderer;

    ipcRenderer.send('ping','我是渲染进程的')
  </script>

就不会报错了，主进程监听就可以了，就不报错了

回复收藏 0

明月松间行 2022-09-18 23:18:00

修改 main.js 中配置

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
});

回复收藏 0

走走停停 2022-09-18 23:18:00

出于安全原因，electron从版本5开始，nodeIntegration默认设置为false了。所以不在代码中加入nodeIntegration=true就会出现错误（require is not defined）。
如果electron应用只使用自己写的本地代码，开启nodeIntegration为true也没什么安全隐患。
参考下面链接中xyres的回答：

https://stackoverflow.com/que...

nodeIntegration: true is a security risk only when you're executing some untrusted remote code on your application. For example, suppose your application opens up a third party webpage. That would be a security risk because the third party webpage will have access to node runtime and can run some malicious code on your user's filesystem. In that case it makes sense to set nodeIntegration: false. If your app is not displaying any remote content, or is displaying only trusted content, then setting nodeIntegration: true is okay.

另外，可参考下面文档：
https://electronjs.org/docs/t...

回复收藏 0

~没有更多了~