split electron main process in multiple file : can't use same `global`

Question

I need some explanation about main and renderer processes. I though that I understood, but I'm in doubt now (and I also need help to debug the main process...)

If I understood this : The main process is all js files that are required by the main js file and they can use app, BrowserWindow, [...] and some other. The renderer processes are all javascript that are included in an html file with the <script> tag ?

I splitted my main process in multiple files, is global common to all these files ? I define global.sharedThing = { ... } in my main.js but I have the error bellow when I try to override it in an other js file with global.sharedThing.label = 'other Str' :

My folder structre :

<root>
    └─ app
        ├─ [...]
        ├─ windows
        │    └─ tests
        │        ├─ index.js
        │        ├─ script.js
        │        └─ view.html
        └─ main.js

Where

main.js = app entrypoint (electron .)
index.js = required by main.js, use BrowserWindow and ipcMain to manage the window
script.js = used in index.html (in ), handle some JQuery and use ipcRenderer and remote
view.html = the html file loaded in the window

./app/main.js

'use strict'

const { app } = require('electron');

const test = require('./windows/tests');

console.log('test debug from main.js'); // don't appear anywhere

global.sharedThing = {
  label: 'Shared from main.js'
};

function Init() {
  test.Create();
}

app.on('ready', Init);

./app/windows/tests/index.js

const { app, BrowserWindow, ipcMain } = require('electron');

let win = null;

// global.sharedThing.label = 'Shared updated from index.js'; // <== THROW ERROR IF UNCOMMENT

function Create() {
    if(win) return win;

    win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile(path.join(__dirname, '/view.html'));

  win.on('closed', () => {
    win = null;
  });
}

module.exports = {
    Create,
}

./app/windows/tests/script.js

const { ipcRenderer } = require('electron');

window.jQuery = window.$ = require('jquery');

const sharedThing = require('electron').remote.getGlobal('sharedThing');

$(document).ready(function() {
  $('#testBtn').on('click', onClick);
})

function onClick() {
  console.log('sharedThing', sharedThing); // works
}

./app/windows/tests/view.html

        <!-- hidden for brevity -->
    <script src="./script.js"></script>
  </head>
  <body>
    <button type="button" id="testBtn" value="Click me!">Yes!</button>
    <!-- hidden for brevity -->

Klaycon Klaycon · Accepted Answer · 2019-11-27T14:26:00

Your main.js is executed line-by-line, so if you look at it, you have const test = require('./windows/tests'); appearing before the sharedThing global is set. This means all of the code in windows/tests/index.js is executed at that point, before global.sharedThing has been assigned a value, so when you try to access it it's still undefined.

To fix it, simply move your global.sharedThing = ... declaration before require statements for files that depend on it. Alternatively, move the code using global.sharedThing into the create function where you know it'll be valid.

split electron main process in multiple file : can't use same `global`

1 Answers