Bundled package imports highcharts.src.js

[bensaufley]

I'm a little confused about the structure of this repo, which appears to mostly be generated code, not original source files (which I assume are TypeScript? the tsconfig has a baseUrl of src which doesn't exist in this repo), so I apologize if I'm missing something. But here's the issue I'm encountering:

I'm using Vite and have Highcharts as a CDN dependency, so I'm using setHighcharts and then in my Vite config, build.rollupOptions.external: ['highcharts'] – except that doesn't catch the import here: https://github.com/highcharts/highcharts-react/blob/d4189de37b509173700b730a3b7788c70f31ab3d/Highcharts.js#L27

So then I can update my external to /^highcharts($|\/)/. This works and resolves the import as external. However, I'm not using .src.js in my production code for what I imagine are obvious reasons, and so when it tries to import that package (even though it's not in use, the import is still being run) it errors. I'm working to try to override that import using resolve.alias but it's causing problems that I'm trying to chase down.

In the meantime I thought I'd raise this issue here: I would expect that, at least in the production code, in the bundled package, the import would simply be import Highcharts from 'highcharts'. In fact if that were the case, I think I wouldn't have to use setHighcharts at all, because it would import the correct external to begin with.

[goransle]

Thanks for the input! We are using the /esm/ modules internally because they allow for better control of module loading. But we will look into dropping the .src.js in the path.

When it comes to using files from the CDN, I found that using an importmap in the root html file worked quite well for redirecting the imports:

<script type="importmap">
    {
      "imports": {
        "highcharts/esm/highcharts.src.js": "https://code.highcharts.com/esm/highcharts.js",
        "highcharts/esm/highcharts-more.src.js": "https://code.highcharts.com/esm/highcharts-more.js",
        "highcharts/esm/": "https://code.highcharts.com/esm/"
      }
    }
</script>

Along with this in vite.config.js:

build: {
    rollupOptions: {
        external: (id) => id.startsWith('highcharts')
    }
}

[bennycode]

Are imports like import {Options} from 'highcharts/highcharts.src'; intentional or is there a better way to import the Options?