Highcharts requires a js file. How can I load it and make it available in an Aurelia app?

Help Requests
1

I’m using Highcharts in an Aurelia-based application and for the standard graphs it works like a charm. However, when I try to use the boxplot I get an error as described here

The requested series type does not exist

This error happens when setting chart.type or series.type to a series type that isn’t defined in Highcharts. A typical reason may be that the module or extension where the series type is defined isn’t included.

For example in order to create an arearange series, the highcharts-more.js file must be loaded.

The file highcharts-more.js is present in node_modules/highcharts together with a highcharts-more.d file and a highcharts-more.js.map file. According to various other forums like this the correct way to include said file is to import it like so:

import * as Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';

and then use it as a funtion like so:

HighchartsMore(Highcharts);

If I do this, I get the following (run-time) error: TypeError: highcharts_more_1.default is not a function but hovering over HighchartsMore (in e.g. VS Code) clearly states that it is indeed a function.
highcharts-more
It’s been a long time since I have done any front-end work so I’m completely at loss here. Any help would be highly appreciated.

1 Like
2

It happens very often with older lib because of how they are exported, you can try what is suggested in this other lib having the same problem. Take a look at this post and if that doesn’t work or if you don’t want to use that TSConfig flag then read the entire github issue.

Or this other lib issue is the same with other suggestions.

1 Like
3

Not sure if I understood everything, but adding "esModuleInterop": true to tsconfig.json did not help much. In fact it produced a series of “compilation” errors, e.g.

src\modules\decision-support\bannerinfo.ts(2,1): error TS7038: A namespace-style import cannot be called or constructed, and will cause a failure at runtime.

and so on.

1 Like
4

I also don’t use esModuleInterop as it has a lot of repercussion, you could also try with

const externalLib = require('lib');
or
const externalLib = require('lib').default;

1 Like
5

What type of bundler are you using? Can you create a minimal repro?

1 Like
6

Below the import statements? Like so?

const HighchartsMore = require('highcharts/highcharts-more');

That caused another error:

ERROR [app-router] Error: Module name "highcharts/highcharts-more" has not been loaded yet for context: _
http://requirejs.org/docs/errors.html#notloaded

I’ve tried some of the things on the requirejs.org help page, but nothing worked.

1 Like
7 
"bundler": {
    "id": "cli",
    "displayName": "Aurelia-CLI"
  },

Target is es5, module is amd and lib is ["es2017", "dom"].

1 Like
8

oh I don’t think using amd is a good idea, I think that most people typically use commonjs, my configs is typically something like this:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "target": "es2018",
    "lib": [
      "es2020",
      "dom"
    ]
}
1 Like
9

I switched to commonjs. and then I (re-)intruduced this statement as suggested by you:

const HighchartsMore = require('highcharts/highcharts-more');

Works like a charm. Thank you for your help.

1 Like
10

My celebration was a bit premature as this error occurs when the application is “rebuild” by the watcher (browser sync):

sigh
sigh758×266 10.6 KB

These are my compiler options:

  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "moduleResolution": "node",
    "lib": ["es2017", "dom"],
    "baseUrl": "src"
  },

Having to stop the running process and start it again for every change to the source code is a bit tiresome.

1 Like
11

its recommended to not use require("") syntax in typescript, you probably need to do import * as HighchartsMore from "highcharts/highcharts-more" instead. There is a tsconfig option importHelpers so that the import * as x from 'y' syntax isn’t required.
See https://www.typescriptlang.org/tsconfig#importHelpers

2 Likes
12

I must admit I’m a bit confused as to why importHelpers is required. When I enable it, I get a parse/compilation error saying that tslib.js isn’t found. None of my previous Aurelia projects has this option set. If I can’t solve this I’ll have to look for a replacement for Highcharts something I’m a bit reluctant to do.

1 Like
13

I finally got it to work. Changed the project to use webpack. Added these two lines to the class using Highcharts:

import * as Highcharts from 'highcharts';
import * as HighchartsMore from 'highcharts/highcharts-more';

and got the same error as described in my initial post. Then I added the following line:

HighchartsMore.default(Highcharts);

and that did the trick.

2 Likes