Vue encountering problem when importing highcharts-more

Question

I'm trying to create a BoxPlot in Highcharts. It seems to require a module called highcharts-more. I have trouble importing.

I imported it like this:

import { Chart } from 'highcharts-vue';
import more from 'highcharts/highcharts-more';

more(Chart);

However in browser console the following error appeared:

Uncaught TypeError: Cannot read property 'parts/Globals.js' of undefined
    at eval (highcharts-more.js?33c6:8)
    at eval (BoxPlot.vue?7d00:19)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/BoxPlot.vue?vue&type=script&lang=js& (app.js:933)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (BoxPlot.vue?8bce:1)
    at Module../src/components/BoxPlot.vue?vue&type=script&lang=js& (app.js:2420)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (BoxPlot.vue?67a8:1)

What am I doing wrong?

EDIT I'm using highcharts version 7.1.3 and highcharts-vue 1.3.5.

Answer 1

You need to initialize the highcharts-more module with Highcharts:

import { Chart } from 'highcharts-vue';
import Highcharts from 'highcharts';
import more from 'highcharts/highcharts-more';

more(Highcharts);

---

Docs: https://github.com/highcharts/highcharts-vue#importing-highcharts-modules