The highcmaps library does not work if I have imported the highcstock library before it

Question

I'm working on a Java project where I'm using Highcharts v10.3.2 as my charting library, and I'm using the latest GWT as my client framework. To interact with Highcharts from Java, I've created a Java wrapper using jsinterop.

However, I've run into a puzzling issue – it seems I can't use both Highmaps and Highstock in the same project simultaneously.

Here's the problem:

If I import Highmaps before Highstock, Highmaps works perfectly as expected, but when I try to utilize Highstock, I encounter an error:

$wnd.Highcharts.stockChart is not a function.

Conversely, if I change the order and import Highstock before Highmaps, Highstock works like a charm, but now Highmaps throws an error:

$wnd.Highcharts.mapChart is not a function.

This is how I'm importing the libraries in my project:

<%--Highcharts v10.3.2--%>
<script type="text/javascript" src="assets/js/highcharts.min.js" charset="utf-8"></script>
<script type="text/javascript" src="assets/js/highcharts-maps.min.js" charset="utf-8"></script>
<script type="text/javascript" src="assets/js/highcharts-stock.min.js" charset="utf-8"></script>
<script type="text/javascript" src="assets/js/highcharts-more.min.js" charset="utf-8"></script>

I've also attempted to reproduce this issue in a CodePen, and it indeed seems to be replicable there as well: CodePen Example

Has anyone encountered a similar problem before, or does anyone have insights into why Highstock and Highmaps might not play nicely together when imported in this manner?

Answer 1

It seems that using

<script src="https://code.highcharts.com/maps/modules/map.js"></script>

instead of

<script src="https://code.highcharts.com/maps/highmaps.js"></script>

will do the job.