How to make Highcharts work inside an Electron App?

Question

HTML document: <script src="code/highcharts.js"></script>

In a renderer js file: Highcharts.chart('graph', {...});

The main.js looks like this:

win = new electron.BrowserWindow({
  width: config.width,
  height: config.height,
  backgroundColor: "#000000",
  resizable: true,
  show: false,
  useContentSize: true,
  webPreferences: {
    backgroundThrottling: false,
    contextIsolation: false,
    nodeIntegration: true,
    spellcheck: false,
    zoomFactor: desired_zoomfactor,
  }
});

I can obviously turn nodeIntegration off, this breaks the program though and is not a solution.

The error inside Electron is always the same:

Uncaught ReferenceError: Highcharts is not defined

Why does it work in a Browser, but not in Electron? There is no need for security in my app. So why is it so difficult to make it work?

I have tried using a preloader (does that even make sense here?), using the cdn source and loading the source inside js.

Answer 1

With the default window settings, nodeIntegration has no effect on loading the Highcharts library. I tested it and it works fine when it's on or off. The problem here is setting contextIsolation to false. It seems that you lose the context of the Highcharts object then and that's why it throws this error.