Uncaught TypeError: can't access property "setHighcharts", etc. with Highcharts CDN

[kristofkulcsar]

I am building Looker custom visualizations which needs to be self-contained js files (output format 'umd' | 'iife').

Tech stack:

• RSLib
• pnpm
• React 18.3
• latest highcharts and @highcharts/react

When all highcharts and @highcharts/react dependencies are externalized from dist files and https://code.highcharts.com/12.4.0/highcharts.js is provided in Looker manifest dependencies, then no import works from @highcharts/react, it's all "Uncaught TypeError: can't access property Tooltip", etc.

Is there some additional CDN that should/could be referenced?

Note: We have successfully externalised React and React DOM dependencies this way (RSLib external and CDN script provided in Looker manifest), so the issue is related to Highcharts React.

[K009]

This may be related to how @highcharts/react resolves the Highcharts instance when Highcharts is externalized.

The React wrapper imports its own Highcharts internally and doesn’t appear to automatically fall back to window.Highcharts. When highcharts is externalized and only provided via the CDN, the wrapper’s internal Highcharts reference can end up incomplete, which would explain errors like Tooltip or AST being undefined.

To fix this, you must explicitly provide the CDN Highcharts instance:

import { setHighcharts } from '@highcharts/react';
setHighcharts(window.Highcharts);

I don’t think an additional CDN script is needed — it seems more about ensuring the wrapper is using the same Highcharts instance that’s loaded globally.

[kristofkulcsar]

Unfortunately the issue is still the same after setHighcharts(window.Highcharts).

I opened the Highcharts component from Looker, when Highcharts is loaded from CDN and the window.Highcharts object is correct, and the code would set it, but setHighcharts cannot be accessed at that point, so I am at a loss.

Is there any information that I can provide you to help understand where it goes wrong?

[kristofkulcsar]

@K009
Isn't that a paradox that I need to use setHighcharts to set the correct Highcharts instance but setHighcharts itself cannot be accessed from @highcharts/react?

[kristofkulcsar]

I am afraid I need to migrate back to highcharts-react-official if this issue cannot be resolved.

[K009]

I get your point, and yes it should be fixed. We'll evaluate it on our side and come back with an update.