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) ....

Wolves

"doesn't work as expected" What do you expect and what happens? – Cleptomania

So if the successful import happens, what is the problem? – Cleptomania

I meant that I expect a successful import, but the import fail and I get an exception – Wolves

Do you want to tell us what the exception is or do you want us to guess? The exception message is probably useful for finding out what the issue is. – Cleptomania

I updated the question – Wolves

I've asked this same question about Browserify on the Highcharts page: #33241858 – Ashti

I also need a solution for this. – Rincon

@StefanKarlsson, One hacky solution is to just call jQuery as a script in your html, rather than importing it. It seems that the issue has to do with exposing jQuery globally, so you can either mess with your webpack config to do that, or just call it in a script on page load like I did. – Warila

@aioko thanks for the workaround, i know it can be solved this way but it buggs me that it is a hack :) And if i understand it right, highcharts should not be dependent on jQuery anymore? or am i wrong? Im using version 4.2.2 But im not using jspm/systemjs instead of webpack: asked a question on the highchart forums:forum.highcharts.com/highcharts-usage/… – Rincon

Answer 1

2022 Update Highcharts now have an official wrapper for React - https://github.com/highcharts/highcharts-react

There is a NPM called commonjs-highcharts that solves it. Just run npm i commonjs-highcharts and import it:

import highcharts from "commonjs-highcharts"

Worked for me.

Sadick

not working for me... (I mean, the compilation works but I get $(...).highcharts is not a function) the only thing which seems to work is to import it with a require. – Cringle

OK I figured out: BowerWebpackPlugin is buggy and doesn't allow to expose jQuery as global anymore, and highcharts use window.jQuery... – Cringle

commonjs-highcharts is what finally (after hours of keyboard head slamming) worked for me. couldn't get highcharts-release or any other goofiness to work without doing some webpack config to expose globally – Guanine

This will not work anymore. Highcharts has changed, it's standalone framework adaptor has been removed and commonjs-highcharts hasn't been updated in half a year. – Ashti

As of today, commonjs-highcharts github returns a 404. This didn't work for me. For all you React folks, see my answer. – Purgative

Answer 2

Try this:

npm install highcharts

The issue I faced with this approach is using other modules in highcharts, such as highcharts-more, map, etc., To overcome this I imported highcharts and the other required modules like this:

import highcharts from 'highcharts';
import highchartsMore from 'highcharts-more';
highchartsMore(highcharts);

Conlin

This worked for me. Though, can you please explain why is highchartsMore(highcharts);necessary? – Informative

If you check the highcharts/modules/map.src.js file, it takes the Highcharts object as an argument. – Conlin

Answer 3

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!

Wellthoughtof

Answer 4

Try doing an npm install highcharts-release. Then in your JavaScript file do import Highcharts from 'highcharts-release/highcharts';. There may be a better way, but that worked for me.

Modlin

I not loading jQuery, therefore I want to load the standalone framework too. I get 'Uncaught TypeError: Cannot read property 'addEvent' of undefined' error from highcharts. – Wolves

Highcharts is missing HighchartsAdapter. To get that going, one way to do this is to add HighchartsAdapter as a plugin. More specifically, in webpack.config.js, try adding new webpack.ProvidePlugin({ HighchartsAdapter: 'highcharts-release/adapters/standalone-framework'}) under the plugin array. – Modlin

It still doesn't work. I don't have any errors during the compilation, but I got Uncaught TypeError: $(...).highcharts is not a function when I load my page. (if I display $.fn.highcharts it's undefined) – Cringle

@Cringle did you ever figure this out. Having the same problem with getting $(...).highcharts to work – Subsolar

@Subsolar yes. First, I use the "highcharts-release" package. Then I use the provide plugin: new webpack.ProvidePlugin({ 'window.jQuery': 'jquery' }) – Cringle

Answer 5

Try variations of:

require('expose?Highcharts!highcharts');
require('highcharts/modules/map')(Highcharts);
require('highcharts/highcharts-more')(Highcharts);
require('expose?Highcharts!highcharts/highstock');

If you wander around in ./node_modules/highcharts/... you might be able to trial-and-error your way into the modules and/or libs you need.

I don't have any joy using the form

$('myselector').highcharts(...)

Replacing them with

Highcharts.chart('myselector', ...)

works for me.

Malevolent

Answer 6

You don't need any extra plugin or modification in your webpack config file. Just follow these steps:

install typings file for highcharts using this:

npm install --save @types/highcharts

change your import statements to following:

import * as Highcharts from 'highcharts'; import HighchartsMore = require('highcharts/highcharts-more'); HighchartsMore(Highcharts);

Confiture

Answer 7

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'
}

Vitek

also you can import jQuery with webpack.ProvidePlugin and only declare global.$ = global.jQuery = $. I don't know why but global.$ declaration doesn't work via ProvidePlugin. – Vitek

Answer 8

Try using the package name as used during npm install:

import highcharts from 'highcharts-release';

Omar

Did the install work? Are the files there in the node_modules directory? – Omar

Answer 9

i am working with AngulrJS, ES6, Webpack and Babel. it took me a while to find it but i ended up using expose on highchart.

this is what i did:

npm install highcharts --save

import 'expose?highcharts!highcharts/highcharts';

only import as shown, no need for any thing else.

and then you can simple use highchart in your controller (without adding it as a dependency)

Lira

Answer 10

import Highcharts from 'highcharts';
import 'highcharts-ng'  //add this line if you wish to use highcharts angular directive

And then add a new rule in the webpack.config.js

{
   test: require.resolve('highcharts'),
   use:[{
        loader: 'expose-loader',
        options: 'Highcharts'
   }]
}

Ours

Answer 11

I am using Laravel Mix (on top of Webpack) in case this helps anyone out.

App.js

import Highcharts from 'highcharts';
import highchartsMore from 'highcharts/highcharts-more';

window.Highcharts = highcharts;

highchartsMore(Highcharts);

This works with:

"highcharts": "^9.3.2",

Purgative