Enable Annotations in an ES Module using Typescript

[adm533]

I've been trying to get the annotations module imported as an ES Module in Typescript.
We are using the highcharts npm module v9.3.3
We import highcharts from the es-module masters location in the node_modules directory:
import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js';

I've tried doing similar with the annotations module (either the advanced or regular):
import Annotation from 'highcharts/es-modules/masters/modules/annotations-advanced.src.js'

and with just that added we get a runtime error when trying to add the annotations (Charts.addAnnotation is not a function).
We've also tried adding
Annotation(Highcharts)
which would in theory add the addAnnotation and removeAnnotation code to the charts object.
However with that we get a runtime error:

Uncaught SyntaxError: The requested module './../../../../node_modules/highcharts/es-modules/masters/modules/annotations-advanced.src.js' does not provide an export named 'default'

What is the appropriate way to import the annotations module as an es module?

[michal.f]

Hello and welcome to our forum!

I have prepared a demo on how to initialize the Annotations module in TypeScript.
Demo: https://codesandbox.io/s/highcharts-typ ... ons-1l0109

Let me know if you have any further questions!
Best regards!

[adm533]

Unfortunately that method doesn't work with ES Modules. I get a similar error to the one I get when loading the annotations.src.js from the es-modules directory:
Uncaught SyntaxError: The requested module './node_modules/highcharts/modules/annotations.js' does not provide an export named 'default'

[michal.f]

Hi,

If you are using Highcharts as an NPM package located in the node modules folder, you should import the modules as shown in the demo, without specifying the exact path with the prefix "./node_modules".

Could you reproduce your problem in an online editor?

Best regards!

[adm533]

I was able to solve this yesterday, I just needed to do the following:
import 'highcharts/es-modules/masters/modules/annotations.src.js'
This loads the es module and handles adding all the functions (addAnnotation and removeAnnotation) to the existing Highcharts.Chart.

The main reason I didn't discover this sooner is because I was already doing that in another location for a separate runtime essentially (our web component package vs a storybook runtime).
Anyways it's working now. Thanks for the quick responses.

[michal.f]

That's great to hear! In case of any further questions, feel free to contact us again.

Best regards!