1

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.

David Buck
  • 3,752
  • 35
  • 31
  • 35

2 Answers2

1

I ran into the same problem.

First, make sure when you launch the app, you turn on nodeIntegration:

app.on('ready', _ => {
    mainWindow = new BrowserWindow({
        title: "My Electron App",
        backgroundColor: '#FFF',
        height: 800,
        width: 1200,
        center: true,
        webPreferences: {
            nodeIntegration: true // works on main window only
        }
    })

Then, reference this answer.

Playing with multiple options, both using require and src= methods work. See below with additional inline comments.

<html>
  <head>
    <!-- make sure you have the semicolon after the require -->
    <!-- and make sure NOT to include the .js extension -->
      <script>require('./renderer');</script>
    <!-- make sure you include the extension -->
      <script src="./renderer.js" ></script>
  </head>
  <body>
    <!-- Put HTML first to avoid blocking -->
    <!-- All same options as in head work here, but shouldn't block -->
    <!-- In addition, async and defer might do something -->
    <!-- async should run script asynchronously, and defer wait until DOM loads -->
      <script src="./renderer.js" async></script>
      <script src="./renderer.js" defer></script>
  </body>
  <!-- scripts put here seems intermittent which runs first -->
</html>
<!-- scripts put here seems intermittent which runs first -->

Some will block the HTML from loading until the script runs (I think if in the head tag, no matter what), while others seemed random whether the HTML would load before the script ran. I tested with an alert box in my renderer.js, which would block the window from showing the HTML rendering if it ran first.

LightCC
  • 9,804
  • 5
  • 52
  • 92
0

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')
spring
  • 18,009
  • 15
  • 80
  • 160
  • I suggest that for the present you skip using `require` and just link the "renderer.js" script in the html page. Have it at the bottom or use `defer`. There are lots of tutorials about `electron` – some better than others. Just try to learn one thing at a time. For example, this man's tutorials are very good: video [Main and renderer process communication in Electron](https://www.youtube.com/watch?v=Y7cCASOLdAQ). Related article: http://electron.rocks/different-ways-to-communicate-between-main-and-renderer-process/ – spring Jul 20 '19 at 22:56