Highcarts error after moving to imports

help
1

I’ve had Highcharts working with a Blaze template for a long time now. I’m moving over to imports and now I’m running into trouble.

The chart file module:
/app-name/imports/ui/pages/helpers/charts.js

// NOTE: I added these imports, before I just used a Highcarts meteor package:

import 'highcharts-more';
import 'highcharts-solid-gauge';
import Highcharts from 'highcharts';
import { Template } from 'meteor/templating';

let testGuage = percentage => {
    $('#test-container-gauge').highcharts({
        chart: {
            type: 'solidgauge'
        },
        title: null,
        pane: {
            center: ['50%', '85%'],
            size: '125%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },
        tooltip: {
            enabled: false
        },
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: 'Speed'
            },
            stops: [
                [0.1, '#3b74bf'],
                [0.5, '#0ddfd3'],
                [0.9, '#53df82']
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: -70
            },
            labels: {
                y: 16
            }
        },
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Speed',
            data: percentage,
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:#7e7e7e">{y}%</span><br/>' +
                    '<span style="font-size:12px;color:silver">Test</span></div>'
            }
        }]
    });
}

I import the module here in a template, notice there is no subscription on this template and I’m calling the methods inside the onRendered function:

import { Template } from "meteor/templating";
import { ReactiveDict } from "meteor/reactive-dict";
import { FlowRouter } from 'meteor/kadira:flow-router';

import "./reports.html";

import { testGuage} from '../helpers/charts.js';


Template.Reports.onRendered(function () {
  this.autorun(function() {
		var percentComplete = 0;

		percentComplete = getAccountField('PercentComplete') || 0;
		var gaugeInput = parseInt(percentComplete) || 0;
		var gauge = $('#test-container-gauge');
		if (gauge) testGuage([gaugeInput]);
  });
});

Highcharts dependencies I npm’d in:

    "highcharts": "^5.0.12",
    "highcharts-more": "^0.1.2",
    "highcharts-solid-gauge": "^0.1.2",

Highcharts meteor packages I used, and worked, before switching to imports (I removed these):

And the error:

2

My first thought is to try re-ordering those Highcharts imports:

import Highcharts from 'highcharts';
import 'highcharts-more';
import 'highcharts-solid-gauge';

since the Highcharts object will need to be available for the plugins to extend.

3

I’ll report back after I’ve had a chance to give this a try, thank you!