How to properly import HighCharts with Backbone-boilerplate in an ECMAScript 2015 way?

Question

I'm using the latest Backbone-boilerplate, which adopts ECMAScript 2015 as a default grammar. I'm planning on using HighCharts on this project but stuck with an import issue of Highcharts.

My implementation is as follows.

home.js (which is the default index Backbone.View of Backbone-boilerplate)

import Component from '../../component';
import template from './home.html';
import Pitch from '../../modules/pitches/index';
import $ from 'jquery';
import highcharts from 'highcharts-release/highcharts';

// Import components.
import '../components/sample-component';

export default Component.extend({
    template,

    initialize: function () {
        this.template.registerPartial('nav', require('../partials/nav.html'));
        this.collection = new Pitch.Collection();
        this.collection.fetch({});
        this.listenTo(this.collection, 'reset sync', this.render);
    },

    afterRender: function () {
        $('#container').highcharts({
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'Title'
            },
            subtitle: {
                text: 'Subtitle'
            }
        });
    }
});

I've tried different combinations to get it working but none of them succeeded.

• import highcharts from 'highcharts-release/highcharts'
• import highcharts from 'highcharts'
• import 'highcharts-release/highcharts'
• import 'highcharts'

I get this error, which seems that Highcharts doesn't get imported at all.

Uncaught TypeError: (0 , _jquery2.default)(...).highcharts is not a function

What is the proper way to import HighCharts in an ECMAScript 2015 Way?

Answer 1

I think the problem occurred with jQuery. Following the instruction to use Highcharts with jQuery "kinda" solved the initial problem.

import $ from 'jquery';
require('highcharts')($);

Graphs are rendered well except that there's a highcharts.js:315 Uncaught TypeError: c is not a function | highcharts.js:315 error on console. For further information, I'm currently using Highcharts 4.1.10.

UPDATE: After Highcharts 4.2.0, the following is valid.

import $ from 'jquery';
import Highcharts from 'highcharts';

...

let chart = new Highcharts.Chart();