uncaught ReferenceError: require is not defined in ElectronJS using example docs

Question

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 app cd app code .
Then edit index.js and add nodeIntegration: true.
Edit your index.html to add <script src="renderer.js"></script>
Create a new file renderer.js inside your src folder next to the index.html and index.js files.
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.

Their example doesn't have a script tag https://www.electronjs.org/docs/latest/tutorial/quick-start#create-a-web-page — evolutionxbox, Jul 25 '21 at 15:56
@evolutionxbox I think they do: https://www.electronjs.org/docs/latest/tutorial/quick-start/#bonus-add-functionality-to-your-web-contents that's the common way to use renderer.js, how other way can you load your clientside website js files if not using an script tag or between your — Jose Serodio, Jul 25 '21 at 15:59
Then you must transpile the JS first. _"such as using webpack to bundle and minify your code or React to manage your user interfaces."_ - Require does not exist in the browser. — evolutionxbox, Jul 25 '21 at 16:00
I just added some steps to reproduce the error in case you guys wanna help out, thanks. — Jose Serodio, Jul 25 '21 at 16:29
Does this answer your question? [Client on Node.js: Uncaught ReferenceError: require is not defined](https://stackoverflow.com/questions/19059580/client-on-node-js-uncaught-referenceerror-require-is-not-defined) — evolutionxbox, Jul 25 '21 at 16:31
Thanks man but that link is on my "What I tried" section already! — Jose Serodio, Jul 25 '21 at 16:34
How did you try it? Are you using a build tool to compile the JavaScript first? — evolutionxbox, Jul 25 '21 at 16:36
the `npm start` command which is in fact `electron-forge start` already bundles everything inside src as far as I understand. If you follow the `Steps to reproduce the project and error` that I just updated on my question I guarantee that you will have the project working in a minute with the same error as I have. — Jose Serodio, Jul 25 '21 at 16:38
https://github.com/electron/electron/issues/9920 might have a solution for you — evolutionxbox, Jul 25 '21 at 16:40
@evolutionxbox Just to let you know, I'm still going through... I've tried like 5 solutions from that link already, and I'm still in the middle of the scroll I'm not using React ayways but I'm trying some solutions just in case. I need more time to test everything. — Jose Serodio, Jul 25 '21 at 16:57
After many changes to the main.js WebPreferences, I still can't get it to work. The preload.js trick was promising but still won't work. I get the same error. — Jose Serodio, Jul 25 '21 at 17:07
@evolutionxbox turns out I had a typo, it's **webPreferences** and not **webPrefrerences** as you can read in my What I tried LOL! — Jose Serodio, Jul 25 '21 at 17:29

Jose Serodio · Answer 1 · 2021-07-25T18:48:58.510

0

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.

edited Jul 25 '21 at 18:48

answered Jul 25 '21 at 17:31

Jose Serodio

1,390
3
17
31

1

Glad you got it sorted! – evolutionxbox Jul 25 '21 at 17:47