Highcharts Error while loading solid gauge module - highcharts

Question

I have highcharts used with highcharts-vue.
I have several plugins loaded and working as expected:
import Vue from 'vue';
import Highcharts from 'highcharts';
import HighchartsVue from 'highcharts-vue';
import stockInit from 'highcharts/modules/stock';
import noDataToDisplay from 'highcharts/modules/no-data-to-display';
import solidGauge from 'highcharts/modules/solid-gauge';
if (typeof Highcharts === 'object' && typeof window !== 'undefined') {
stockInit(Highcharts);
solidGauge(Highcharts);
noDataToDisplay(Highcharts);
}
Vue.use(HighchartsVue, {tagName: 'charts'});
But the solid-gauge module I just added generates an error:
Uncaught TypeError: Object prototype may only be an Object or null: undefined
at setPrototypeOf (<anonymous>)
at a (solid-gauge.js:15:327)
at eval (solid-gauge.js:15:388)
at eval (solid-gauge.js:16:308)
at eval (solid-gauge.js:19:291)
at f (solid-gauge.js:11:175)
at eval (solid-gauge.js:14:442)
at eval (highcharts.js:34:72)
at Module../plugins/highcharts.js (app.js:5244:1)
at __webpack_require__ (runtime.js:854:30)
I hardly see how I can investigate further from this step.
I did update my highcharts npm dependency up to 10.0.1 but the error still occurs.
Help would be greatly appreciated!
Cheers

Answer 1

You need to import and initialize the highcharts-more module before solid-gauge.
import Vue from 'vue';
import Highcharts from 'highcharts';
import HighchartsVue from 'highcharts-vue';
import hcMore from 'highcharts/highcharts-more';
import stockInit from 'highcharts/modules/stock';
import noDataToDisplay from 'highcharts/modules/no-data-to-display';
import solidGauge from 'highcharts/modules/solid-gauge';
if (typeof Highcharts === 'object' && typeof window !== 'undefined') {
hcMore(Highcharts);
stockInit(Highcharts);
solidGauge(Highcharts);
noDataToDisplay(Highcharts);
}
Live demo: https://jsfiddle.net/BlackLabel/2dqL70hy/