<script> require('renderer.js') </script> - does not connect the js file

Question

Using Electron, I'm trying to organize IPC between main and renderer. As instructions say I should add the script (see the title) to the index.html. But it doesn't look like it is loaded. Nothing in the rendeder.js gets executed.

It's in this tutorial https://www.brainbell.com/javascript/ipc-communication.html which is the most detailed one on the topic in the internet. Others just skip so much info in their articles that a learner simply can't reproduce it in the app.

I tried:

<script> 
    require('renderer.js')
</script>

<script>
    require('./renderer.js')
</script>

<script src='renderer.js'>
</script>

etc similar.

Answer 1

So let me show what I do, maybe that will help.

Code to create a window. Note the webPreferences settings

app.on('ready', function () {
  mainWindow = new BrowserWindow({
    show: false,
    width: 1024,
    height: 768,
    backgroundColor: '#2C3E50',
    center: true,
    webPreferences: {
      nodeIntegration: true,
      devTools: true
    }
  })

Without devtools you can not see error output or inspect content. There are other ways to open devTools through menu and keyboard commands.

Then, assuming you have installed the script or lib through npm you can just do the following without specifying a path, otherwise you will need a relative path

const THREE = require('three')