Short intro
I've been following the official Electron docs (https://www.electronjs.org/docs/api/ipc-main)
about communicating from render and main processes, but I can't get it to work.
The error
While trying the Sending Messages example, I get this error in my JS console:
❌ Uncaught ReferenceError: require is not defined
The example code
This is on my last lines in my main.js
// In main process.
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.reply('asynchronous-reply', 'pong')
})
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.returnValue = 'pong'
})
And this is what I have in my render.js
// In renderer process (web page).
const { ipcRenderer } = require('electron')
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')
The error I get is in this part const { ipcRenderer } = require('electron')
https://www.electronjs.org/docs/api/ipc-main#sending-messages
This is how I call my render.js inside my <head>
<script defer src="../scripts/render.js"></script>
Screenshot
What I tried
I've followed this related Q/A but I still get the same error:
Using ipc in Electron to set global variable from renderer
Also this: Uncaught ReferenceError: require is not defined in Electron
And this: "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6
I've seen that some people say that you need to enable nodeIntegration in your main.js, and yes I have it enabled but still throws the error:
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 1280,
height: 900,
icon: path.join(__dirname, '../render/assets/favicon.png'),
autoHideMenuBar: true,
webPrefrerences: {
nodeIntegration: true,
}
});
I also tried converting to ES6 module syntax.
import { ipcRenderer } from 'electron';
While also adding the type="module" like this:
<script type="module" defer src="../scripts/render.js"></script>
But the error then is:
❌Uncaught SyntaxError: Cannot use import statement outside a module
I've been searching for days for a solution here in SO but I couldn't find anything to sort this out, so any help will be appreciated.
Steps to reproduce the project and error
Initialize the project and open up with your desired editor.
npx create-electron-app appcd appcode .Then edit
index.jsand addnodeIntegration: true.Edit your
index.htmlto add<script src="renderer.js"></script>Create a new file
renderer.jsinside your src folder next to theindex.htmlandindex.jsfiles.Now you should have the following tree:
+-src
---index.css
---index.html
---index.js (this is your main.js)
---renderer.js (this ins your renderer.js)Add the example code to the index.js and renderer.js
Run the following command
npm start, a new window should open with the Electron app running.The console throws the error.
I had a typo in my main.js
It is webPreferences not webPrefrerences!
nodeIntegration is False by default, that's why I couldn't use require.