how to import highcharts with webpack and babel

Question

I use ES6, Babel and webpack stack.

I have installed highcharts by npm (I prefer to use the official highcharts npm repo):

npm install highcharts-release --save

But, regular import (ES6) doesn't work as expected:

import highcharts from 'highcharts';

How can I import Highcharts via webpack import? Can you post a webpack.config.js example (or other way to config the plugins)?

Thanks.

EDIT

The error is:

Uncaught Error: Cannot find module "highcharts" webpackMissingModule @ review-chart.js:2(anonymous function) ....

Answer 1

This is how I solved it, using Webpack v4.16.5 and Highcharts v5.0.11.

webpack.config

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: [{
        loader: 'babel-loader'
      }]
    },
    {
      test: /highcharts.*/,
      loader: 'imports-loader?window=>global&window.jQuery=>$'
    }
    // ...
  ],
  alias: {
    jquery: 'jquery/jquery'
    // ...
  }
},
externals: {
  jQuery: 'jQuery'
},
plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
    Highcharts: 'highcharts/highcharts'
    // ...
  })
]

main.js 1st option

import addMore from 'highcharts/highcharts-more'
import addExporting from 'highcharts/modules/exporting'
import addOfflineExporting from 'highcharts/modules/offline-exporting'
import addSolidGauge from 'highcharts/modules/solid-gauge'
import addDrilldown from 'highcharts/modules/drilldown'
import addTreemap from 'highcharts/modules/treemap'
import addFunnel from 'highcharts/modules/funnel'

addMore(Highcharts)
addExporting(Highcharts)
addOfflineExporting(Highcharts)
addSolidGauge(Highcharts)
addDrilldown(Highcharts)
addTreemap(Highcharts)
addFunnel(Highcharts)

main.js 2nd option:

require('highcharts/highcharts-more')(Highcharts)
require('highcharts/modules/exporting')(Highcharts)
require('highcharts/modules/offline-exporting')(Highcharts)
require('highcharts/modules/solid-gauge')(Highcharts)
require('highcharts/modules/drilldown')(Highcharts)
require('highcharts/modules/treemap')(Highcharts)
require('highcharts/modules/funnel')(Highcharts)

This way, it's both $(..).highcharts() and Highcharts.chart() usable.

Hope this helps!

Answer 2

For me only this method is working with webpack(and was working with browserify as well):

global.js

import $ from 'jquery';

global.$ = global.jQuery = $;

app.js

import './globals';
import 'angular';
import 'highcharts';
// ...

I don't know why webpack.ProvidePlugin works fine with AngularJS but not with highcharts.

My config was looking like:

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery', // for using with AngularJS
    _: 'underscore',
    moment: 'moment'
})

// I've also tried this but without luck:
{
  test: require.resolve('highcharts'),
  loader: 'imports-loader?jQuery=jquery'
}