New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Highcharts not defined" as ES6 imports (browserify, babel) #4994

Closed
piggyslasher opened this Issue Feb 3, 2016 · 36 comments

Comments

Projects
None yet
@piggyslasher

piggyslasher commented Feb 3, 2016

I've tried everything possible to get Highcharts to work with Babel / Browserify / ES6 imports. I'm getting a ReferenceError: Highcharts is not defined error. I was previously using highstock-browserify but it broke after the adaptor was removed.

I did a

npm install highcharts --save-dev

I've done a

//highcharts libraries
import Highcharts from 'highcharts/highstock';
import 'highcharts-ng'; //angular highcharts bindings

If I look in dev tools the file is being imported fine:

image

Any help appreciated. Possibly related issue on stackoverflow.

EDIT:

Also tried, in desperation ( :P ) with highcharts-release package.

And more. I've also tried the recommended method. File appears to be included in the source, but Highcharts is still undefined.

//highcharts libraries
let Highcharts = require('highcharts/highstock');
import 'highcharts-ng';

CC- @laytzehwu

@ragefuljoe

This comment has been minimized.

Show comment
Hide comment
@ragefuljoe

ragefuljoe Feb 9, 2016

I'm using webpack ng es6, and the only way I've gotten it to work is with

var Highcharts = require('highcharts/highstock');
window.Highcharts = Highcharts;
require('highcharts/modules/exporting')(Highcharts);

If someone knows how to get this to work with using import syntax, please reply

ragefuljoe commented Feb 9, 2016

I'm using webpack ng es6, and the only way I've gotten it to work is with

var Highcharts = require('highcharts/highstock');
window.Highcharts = Highcharts;
require('highcharts/modules/exporting')(Highcharts);

If someone knows how to get this to work with using import syntax, please reply

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi
Collaborator

TorsteinHonsi commented Feb 10, 2016

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Feb 10, 2016

Collaborator

Thanks for reporting! We will look into this as soon as possible. In the meantime, you could have a look at webpack with a babel-loader as an alternative.

Collaborator

jon-a-nygaard commented Feb 10, 2016

Thanks for reporting! We will look into this as soon as possible. In the meantime, you could have a look at webpack with a babel-loader as an alternative.

@piggyslasher

This comment has been minimized.

Show comment
Hide comment
@piggyslasher

piggyslasher Feb 11, 2016

Hi, @jon-a-nygaard. Webpack is definately the way forward. We're going to use that in the next project. This project however is a bit too mature with quite a number of browserify custom bundles. Do let me know if you figure this out.

piggyslasher commented Feb 11, 2016

Hi, @jon-a-nygaard. Webpack is definately the way forward. We're going to use that in the next project. This project however is a bit too mature with quite a number of browserify custom bundles. Do let me know if you figure this out.

@piggyslasher

This comment has been minimized.

Show comment
Hide comment
@piggyslasher

piggyslasher Feb 11, 2016

Okay. @ragefuljoe - the window.Highcharts = Highcharts was what was needed. It works with this import syntax!

import Highcharts from 'highcharts/highstock';
window.Highcharts = Highcharts; //this line did the magic
import 'highcharts-ng';

Should we close this or do you guys want to bind window.Highcharts inside your code? I think this should be added to the main docs or somewhere.

piggyslasher commented Feb 11, 2016

Okay. @ragefuljoe - the window.Highcharts = Highcharts was what was needed. It works with this import syntax!

import Highcharts from 'highcharts/highstock';
window.Highcharts = Highcharts; //this line did the magic
import 'highcharts-ng';

Should we close this or do you guys want to bind window.Highcharts inside your code? I think this should be added to the main docs or somewhere.

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Feb 11, 2016

Collaborator

@piggyslasher Glad the workaround from @ragefuljoe helped you. I will leave this issue open, so we can work on improving loading Highcharts with ES6 imports.

I think this should be added to the main docs or somewhere.

Indeed, I will add the workaround as a note to the Install from npm article.

Collaborator

jon-a-nygaard commented Feb 11, 2016

@piggyslasher Glad the workaround from @ragefuljoe helped you. I will leave this issue open, so we can work on improving loading Highcharts with ES6 imports.

I think this should be added to the main docs or somewhere.

Indeed, I will add the workaround as a note to the Install from npm article.

@ragefuljoe

This comment has been minimized.

Show comment
Hide comment
@ragefuljoe

ragefuljoe Feb 11, 2016

that's cool @piggyslasher. any luck importing exporting.js with import syntax?

update
here're all my highcharts related lines, with maps needed as well:

import Highcharts from 'highcharts/highstock';
window.Highcharts = Highcharts;
require('highcharts/modules/map')(Highcharts);
require('highcharts/modules/exporting')(Highcharts);
require('./pages/home-page/world'); //I'm downloading this from example links. any better way?
import 'highcharts-ng';

Is there better way to handle the specific map data? E.g., I'm downloading and explicitly including world.js here (other option is to get the json from the backend, which I might do)

ragefuljoe commented Feb 11, 2016

that's cool @piggyslasher. any luck importing exporting.js with import syntax?

update
here're all my highcharts related lines, with maps needed as well:

import Highcharts from 'highcharts/highstock';
window.Highcharts = Highcharts;
require('highcharts/modules/map')(Highcharts);
require('highcharts/modules/exporting')(Highcharts);
require('./pages/home-page/world'); //I'm downloading this from example links. any better way?
import 'highcharts-ng';

Is there better way to handle the specific map data? E.g., I'm downloading and explicitly including world.js here (other option is to get the json from the backend, which I might do)

@romiem

This comment has been minimized.

Show comment
Hide comment
@romiem

romiem Mar 2, 2016

I'm having exactly the same issue. All I want to do in my project is import 'Highcharts' and be done with it. All the other major JS libraries "just work" out of the box and I can't understand why Highcharts does not.

@jon-a-nygaard @TorsteinHonsi - it might be worth looking at how Angular, lodash, underscore, ui-router and the myriad of other JS libraries expose their functionality for browserify/webpack etc and duplicate it in highcharts.

romiem commented Mar 2, 2016

I'm having exactly the same issue. All I want to do in my project is import 'Highcharts' and be done with it. All the other major JS libraries "just work" out of the box and I can't understand why Highcharts does not.

@jon-a-nygaard @TorsteinHonsi - it might be worth looking at how Angular, lodash, underscore, ui-router and the myriad of other JS libraries expose their functionality for browserify/webpack etc and duplicate it in highcharts.

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Mar 3, 2016

Collaborator

@romiem Thanks for the tip. I am currently working on a fix for this, planning to get it into our next maintenance release.

Collaborator

jon-a-nygaard commented Mar 3, 2016

@romiem Thanks for the tip. I am currently working on a fix for this, planning to get it into our next maintenance release.

@jachinte

This comment has been minimized.

Show comment
Hide comment
@jachinte

jachinte May 18, 2016

Hi,
I'm having a similar issue with highcharts 4.2.5. I'm following the article Use Highcharts to create charts in React .
If I use the import syntax, that is import Highcharts from 'highcharts', I get the error Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor.

When I use the syntax suggested by @ragefuljoe, it works! however, that makes me think, how about using 'highcharts/highstock instead of 'highcharts'? well, it works with the import syntax. What's the difference, or is it thought to work that way and I was using the import wrongly?

Here is the complete (working) code:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Highcharts from 'highcharts/highstock';
class Chart extends Component {
    constructor(props) {
        super(props);
    }
    // When the DOM is ready, create the chart.
    componentDidMount() {
        // Extend Highcharts with modules
        if (this.props.modules) {
            this.props.modules.forEach(function (module) {
                module(Highcharts);
            });
        }
        this.chart = new Highcharts[this.props.type || "Chart"](
            this.props.container, 
            this.props.options
        );
    }
    //Destroy chart before unmount.
    componentWillUnmount() {
        this.chart.destroy();
    }
    //Create the div which the chart will be rendered to.
    render() {
        return React.createElement('div', { id: this.props.container });
    }
}
export default Chart;

Thanks @jon-a-nygaard for letting me know about this thread.

jachinte commented May 18, 2016

Hi,
I'm having a similar issue with highcharts 4.2.5. I'm following the article Use Highcharts to create charts in React .
If I use the import syntax, that is import Highcharts from 'highcharts', I get the error Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor.

When I use the syntax suggested by @ragefuljoe, it works! however, that makes me think, how about using 'highcharts/highstock instead of 'highcharts'? well, it works with the import syntax. What's the difference, or is it thought to work that way and I was using the import wrongly?

Here is the complete (working) code:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Highcharts from 'highcharts/highstock';
class Chart extends Component {
    constructor(props) {
        super(props);
    }
    // When the DOM is ready, create the chart.
    componentDidMount() {
        // Extend Highcharts with modules
        if (this.props.modules) {
            this.props.modules.forEach(function (module) {
                module(Highcharts);
            });
        }
        this.chart = new Highcharts[this.props.type || "Chart"](
            this.props.container, 
            this.props.options
        );
    }
    //Destroy chart before unmount.
    componentWillUnmount() {
        this.chart.destroy();
    }
    //Create the div which the chart will be rendered to.
    render() {
        return React.createElement('div', { id: this.props.container });
    }
}
export default Chart;

Thanks @jon-a-nygaard for letting me know about this thread.

@SamEureka

This comment has been minimized.

Show comment
Hide comment
@SamEureka

SamEureka Jun 10, 2016

👍 to enhanced Webpack support. I've been doing all my React/Highsoft experiments in CodePen, but will be moving to a proper node env soon. Webpack/Import/ES6 is good stuff.

React w/MDL & Highstock (test)

SamEureka commented Jun 10, 2016

👍 to enhanced Webpack support. I've been doing all my React/Highsoft experiments in CodePen, but will be moving to a proper node env soon. Webpack/Import/ES6 is good stuff.

React w/MDL & Highstock (test)

@Skuriles

This comment has been minimized.

Show comment
Hide comment
@Skuriles

Skuriles Oct 14, 2016

Are there any news about "simple" import { Highcharts} from "highcharts" module in typescript/angular 2 applications with highcharts 5? Only found the docs about "require Highcharts" which is always a little bit hacky...

Skuriles commented Oct 14, 2016

Are there any news about "simple" import { Highcharts} from "highcharts" module in typescript/angular 2 applications with highcharts 5? Only found the docs about "require Highcharts" which is always a little bit hacky...

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi
Collaborator

TorsteinHonsi commented Oct 14, 2016

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Oct 17, 2016

Collaborator

@Skuriles What type of bundler (e.g. Webpack, Browserify) are you using? Here's an example of how you can use Highcharts with ES6 and Babelify

Collaborator

jon-a-nygaard commented Oct 17, 2016

@Skuriles What type of bundler (e.g. Webpack, Browserify) are you using? Here's an example of how you can use Highcharts with ES6 and Babelify

@Skuriles

This comment has been minimized.

Show comment
Hide comment
@Skuriles

Skuriles Oct 17, 2016

@jon-a-nygaard I'm using SystemJs

Skuriles commented Oct 17, 2016

@jon-a-nygaard I'm using SystemJs

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Oct 19, 2016

Collaborator

@Skuriles Here's an example of how I used Highcharts with SystemJS. Hope it helps, if not please let me know.

Collaborator

jon-a-nygaard commented Oct 19, 2016

@Skuriles Here's an example of how I used Highcharts with SystemJS. Hope it helps, if not please let me know.

@Skuriles

This comment has been minimized.

Show comment
Hide comment
@Skuriles

Skuriles Oct 19, 2016

Will try it as soon as possible and post solution here!
Thank you very much for your example!!

Skuriles commented Oct 19, 2016

Will try it as soon as possible and post solution here!
Thank you very much for your example!!

@Skuriles

This comment has been minimized.

Show comment
Hide comment
@Skuriles

Skuriles Oct 21, 2016

I changed my code due to your proposal, but I still get typescript errors from intellisens and also the gulp-typescript compiler throws errors. It works in the compiled app but this is not satisfying.

import Highcharts from 'highcharts/highstock.js" is still an unknown module.

I also tried with typescript-babel plugin but this throws compiler for other things.

So finally I went to back to load the highstock.js file directly without systemjs and just declare Highcharts in the TS file to prevent compile errors.

I wait for a real ES6 module but for now we can live as it as we will probably switch to precompiled, bundled versions without systemjs for release!

Skuriles commented Oct 21, 2016

I changed my code due to your proposal, but I still get typescript errors from intellisens and also the gulp-typescript compiler throws errors. It works in the compiled app but this is not satisfying.

import Highcharts from 'highcharts/highstock.js" is still an unknown module.

I also tried with typescript-babel plugin but this throws compiler for other things.

So finally I went to back to load the highstock.js file directly without systemjs and just declare Highcharts in the TS file to prevent compile errors.

I wait for a real ES6 module but for now we can live as it as we will probably switch to precompiled, bundled versions without systemjs for release!

@reznord

This comment has been minimized.

Show comment
Hide comment
@reznord

reznord Nov 4, 2016

@jon-a-nygaard I am not able to render my highchart in my recat app. All I am getting is a blank screen. This is what I am doing for my highchart:

import React, {Component, PropTypes} from 'react';
import Highcharts from 'highcharts/highcharts';
import styles from './styles/linechart.css';
import cssModules from 'react-css-modules';
import request from 'axios';
import moment from 'moment';

@cssModules(styles)
class LineChart extends Component {
    constructor(props) {
        super(props);
    }

    static propTypes = {
        modules: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.object,
            PropTypes.array
        ]),
        container: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.object,
            PropTypes.array,
        ]),
        options: PropTypes.oneOfType([
            PropTypes.object,
            PropTypes.array
        ]),
    };

    highchartsModules() {
        if (this.props.modules) {
            this.props.modules.forEach(function(module) {
                module(Highcharts);
            });
        }
    }

    componentDidMount() {

        const inComing = [];
        const outGoing = [];
        const xAxisData = [];

        request.get('/dashboard/hourly', {
            params: {
                timezone: moment().utcOffset(),
                date:     '2016-07-06'
                // date:     moment(new Date()).format('YYYY-DD-MM')
            }
        }).then(response => {
                response.data.forEach(item => {
                    const flattened = {};
                    const out = {};
                    flattened.name = item.date;
                    flattened.y = item.inCount;
                    out.name = item.date;
                    out.y = item.outCount;
                    xAxisData.push(item.hour);
                    inComing.push(flattened);
                    outGoing.push(flattened);
                });
            });

            console.log('InComing data: ', inComing);
            console.log('OutGoing data: ', outGoing);
            console.log('X Axis data: ', xAxisData);

            const chartOptions = {
                tooltip: {
                    borderRadius:    20,
                    backgroundColor: 'rgba(18, 21, 23, 0.9)',
                    style:           {
                        color: 'white',
                    },
                    shadow: false,
                },
                title: {
                    text: ''
                },
                subTitle: {
                    text: ''
                },
                xAxis: {
                    categories: xAxisData,
                    labels:     {
                        enabled: false
                    },
                    crosshair: {
                        width:     1,
                        dashStyle: 'Dash',
                        color:     'black',
                        snap:      false,
                    },
                    tickInterval: 2
                },
                legend: {
                    enabled: false,
                },
                series: [{
                    name: 'Incoming Calls',
                    data: inComing
                }, {
                    name: 'Outgoing Calls',
                    data: outGoing
                }
            ]
        };

        this.highchartsModules();
        console.log('CHART OPTIONS: ', chartOptions);
        if (typeof window !== 'undefined') {
            this.chart = new Highcharts['Chart'](
                this.props.container,
                chartOptions
            );
        }
    }

    render() {
        const { container } = this.props;
        return (
            // <div styleName="chart">
                <div class="chart" id={container} />
            // </div>
        );
    }
}

export default LineChart;

and I am using this highchart in the following way in my app:

<LineChart container="chart" type="chart" />

Any help appreciated. Thanks in advance.

reznord commented Nov 4, 2016

@jon-a-nygaard I am not able to render my highchart in my recat app. All I am getting is a blank screen. This is what I am doing for my highchart:

import React, {Component, PropTypes} from 'react';
import Highcharts from 'highcharts/highcharts';
import styles from './styles/linechart.css';
import cssModules from 'react-css-modules';
import request from 'axios';
import moment from 'moment';

@cssModules(styles)
class LineChart extends Component {
    constructor(props) {
        super(props);
    }

    static propTypes = {
        modules: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.object,
            PropTypes.array
        ]),
        container: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.object,
            PropTypes.array,
        ]),
        options: PropTypes.oneOfType([
            PropTypes.object,
            PropTypes.array
        ]),
    };

    highchartsModules() {
        if (this.props.modules) {
            this.props.modules.forEach(function(module) {
                module(Highcharts);
            });
        }
    }

    componentDidMount() {

        const inComing = [];
        const outGoing = [];
        const xAxisData = [];

        request.get('/dashboard/hourly', {
            params: {
                timezone: moment().utcOffset(),
                date:     '2016-07-06'
                // date:     moment(new Date()).format('YYYY-DD-MM')
            }
        }).then(response => {
                response.data.forEach(item => {
                    const flattened = {};
                    const out = {};
                    flattened.name = item.date;
                    flattened.y = item.inCount;
                    out.name = item.date;
                    out.y = item.outCount;
                    xAxisData.push(item.hour);
                    inComing.push(flattened);
                    outGoing.push(flattened);
                });
            });

            console.log('InComing data: ', inComing);
            console.log('OutGoing data: ', outGoing);
            console.log('X Axis data: ', xAxisData);

            const chartOptions = {
                tooltip: {
                    borderRadius:    20,
                    backgroundColor: 'rgba(18, 21, 23, 0.9)',
                    style:           {
                        color: 'white',
                    },
                    shadow: false,
                },
                title: {
                    text: ''
                },
                subTitle: {
                    text: ''
                },
                xAxis: {
                    categories: xAxisData,
                    labels:     {
                        enabled: false
                    },
                    crosshair: {
                        width:     1,
                        dashStyle: 'Dash',
                        color:     'black',
                        snap:      false,
                    },
                    tickInterval: 2
                },
                legend: {
                    enabled: false,
                },
                series: [{
                    name: 'Incoming Calls',
                    data: inComing
                }, {
                    name: 'Outgoing Calls',
                    data: outGoing
                }
            ]
        };

        this.highchartsModules();
        console.log('CHART OPTIONS: ', chartOptions);
        if (typeof window !== 'undefined') {
            this.chart = new Highcharts['Chart'](
                this.props.container,
                chartOptions
            );
        }
    }

    render() {
        const { container } = this.props;
        return (
            // <div styleName="chart">
                <div class="chart" id={container} />
            // </div>
        );
    }
}

export default LineChart;

and I am using this highchart in the following way in my app:

<LineChart container="chart" type="chart" />

Any help appreciated. Thanks in advance.

@Skuriles

This comment has been minimized.

Show comment
Hide comment
@Skuriles

Skuriles Dec 9, 2016

So far I got it to work.

import Highcharts from "highcharts";

systemjs
map:
'highcharts': "npm:highcharts"
package:
'highcharts': { main: "highstock", defaultExtension: "js"}

only problem:
compiler throws errors because @types/highharts has the following problem:
Property 'StockChart' does not exist on type 'Static'.

but the app works at least

Skuriles commented Dec 9, 2016

So far I got it to work.

import Highcharts from "highcharts";

systemjs
map:
'highcharts': "npm:highcharts"
package:
'highcharts': { main: "highstock", defaultExtension: "js"}

only problem:
compiler throws errors because @types/highharts has the following problem:
Property 'StockChart' does not exist on type 'Static'.

but the app works at least

@JanBoshoff

This comment has been minimized.

Show comment
Hide comment
@JanBoshoff

JanBoshoff Dec 9, 2016

In case someone might need it with Rollup

I have the following setup which is working.

In a vendor.ts file I have

import * as _highcharts from 'highcharts/highcharts';
...
export default {
   ...
   _highcharts
};

Which creates a vendor bundle.
Then in my app.rollup.js (config file to create my app bundle).

export default {
	entry: 'src/main.ts',
	dest: 'bundles/app.js',
	format: 'iife',
	sourceMap: true,
	moduleName: 'app',
	plugins: [
		...
	],
	external: [
		'highcharts/highcharts'
	],
	globals: {
		...
		'highcharts/highcharts': 'vendor._highcharts'
	}
};

And finally in my application I can use

import Highcharts from 'highcharts/highcharts';

JanBoshoff commented Dec 9, 2016

In case someone might need it with Rollup

I have the following setup which is working.

In a vendor.ts file I have

import * as _highcharts from 'highcharts/highcharts';
...
export default {
   ...
   _highcharts
};

Which creates a vendor bundle.
Then in my app.rollup.js (config file to create my app bundle).

export default {
	entry: 'src/main.ts',
	dest: 'bundles/app.js',
	format: 'iife',
	sourceMap: true,
	moduleName: 'app',
	plugins: [
		...
	],
	external: [
		'highcharts/highcharts'
	],
	globals: {
		...
		'highcharts/highcharts': 'vendor._highcharts'
	}
};

And finally in my application I can use

import Highcharts from 'highcharts/highcharts';

@gevgeny

This comment has been minimized.

Show comment
Hide comment
@gevgeny

gevgeny Dec 17, 2016

@jon-a-nygaard Unfortunately your example does not work with typescript compiler. I get 'highchart' has no default export error.

gevgeny commented Dec 17, 2016

@jon-a-nygaard Unfortunately your example does not work with typescript compiler. I get 'highchart' has no default export error.

@danday74

This comment has been minimized.

Show comment
Hide comment
@danday74

danday74 May 4, 2017

@Skuriles thanks your approach works but I did a plain and simple ..

import 'highcharts';

(in addition to your other suggestions)

Thanks

danday74 commented May 4, 2017

@Skuriles thanks your approach works but I did a plain and simple ..

import 'highcharts';

(in addition to your other suggestions)

Thanks

@schippie

This comment has been minimized.

Show comment
Hide comment
@schippie

schippie May 29, 2017

None of the solutions above worked for me in the latest typescript version for me the below one did work:

import Highcharts from 'highcharts/highcharts.src.js';
import {default as HighchartsMore} from 'highcharts/highcharts-more.src.js';
HighchartsMore(Highcharts);

schippie commented May 29, 2017

None of the solutions above worked for me in the latest typescript version for me the below one did work:

import Highcharts from 'highcharts/highcharts.src.js';
import {default as HighchartsMore} from 'highcharts/highcharts-more.src.js';
HighchartsMore(Highcharts);
@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard May 31, 2017

Collaborator

For those of you working with Highcharts in TypeScript, I have created a simple example of a working setup. What to take note of from this example is that loading Highcharts should be done as following:

import * as Highcharts from 'highcharts'
import * as HighchartsMore from 'highcharts/highcharts-more.src.js'
HighchartsMore(Highcharts)

The reason why import Highcharts from 'highcharts' does not work, is that such a syntax requires our modules to export a default, which they do not. For those interested, Typescript has a good documentation on various forms of importing.

Collaborator

jon-a-nygaard commented May 31, 2017

For those of you working with Highcharts in TypeScript, I have created a simple example of a working setup. What to take note of from this example is that loading Highcharts should be done as following:

import * as Highcharts from 'highcharts'
import * as HighchartsMore from 'highcharts/highcharts-more.src.js'
HighchartsMore(Highcharts)

The reason why import Highcharts from 'highcharts' does not work, is that such a syntax requires our modules to export a default, which they do not. For those interested, Typescript has a good documentation on various forms of importing.

@Sandipj38

This comment has been minimized.

Show comment
Hide comment
@Sandipj38

Sandipj38 Jul 4, 2017

Hi Jon, in my case it is working fine in google chrome and also showing the charts. But these charts are not coming in case of mozilla and also not giving any error in console. Give me some solution how to solve.

Sandipj38 commented Jul 4, 2017

Hi Jon, in my case it is working fine in google chrome and also showing the charts. But these charts are not coming in case of mozilla and also not giving any error in console. Give me some solution how to solve.

@Sandipj38

This comment has been minimized.

Show comment
Hide comment
@Sandipj38

Sandipj38 Jul 4, 2017

Any one who solve this please help

Sandipj38 commented Jul 4, 2017

Any one who solve this please help

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Jul 4, 2017

Contributor

Hi @Sandipj38,

It doesn't sound like issue with ES6 imports. Could you create a topic on our forum or send us an email (details)? Thanks!

Contributor

pawelfus commented Jul 4, 2017

Hi @Sandipj38,

It doesn't sound like issue with ES6 imports. Could you create a topic on our forum or send us an email (details)? Thanks!

@satishrao84

This comment has been minimized.

Show comment
Hide comment
@satishrao84

satishrao84 Sep 22, 2017

Hello,
I am using webpack, with react and highcharts. I am getting an error with

Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor

I've gone though this issue and I've not been able to find a solution. I've tried every possible permutation and combination of import/require 'highcharts', 'highcharts/highstock,'highcharts.js' and now I am completely out of options.

      var Chart = React.createClass({
           componentDidMount: function () {
               // Extend Highcharts with modules
               if (this.props.modules) {
                   this.props.modules.forEach(function (module) {
                       module(Highcharts);
                   });
               }
               // Set container which the chart should render to.
               this.chart = new Highcharts[this.props.type || "Chart"](
                   this.props.container, 
                   this.props.options
               );
           },
           //Destroy chart before unmount.
           componentWillUnmount: function () {
               this.chart.destroy();
           },
           //Create the div which the chart will be rendered to.
           render: function () {
               return React.createElement('div', { id: this.props.container });
           }
        }), element2;

Could you please help me out here?

satishrao84 commented Sep 22, 2017

Hello,
I am using webpack, with react and highcharts. I am getting an error with

Uncaught TypeError: _highcharts2.default[(this.props.type || "Chart")] is not a constructor

I've gone though this issue and I've not been able to find a solution. I've tried every possible permutation and combination of import/require 'highcharts', 'highcharts/highstock,'highcharts.js' and now I am completely out of options.

      var Chart = React.createClass({
           componentDidMount: function () {
               // Extend Highcharts with modules
               if (this.props.modules) {
                   this.props.modules.forEach(function (module) {
                       module(Highcharts);
                   });
               }
               // Set container which the chart should render to.
               this.chart = new Highcharts[this.props.type || "Chart"](
                   this.props.container, 
                   this.props.options
               );
           },
           //Destroy chart before unmount.
           componentWillUnmount: function () {
               this.chart.destroy();
           },
           //Create the div which the chart will be rendered to.
           render: function () {
               return React.createElement('div', { id: this.props.container });
           }
        }), element2;

Could you please help me out here?

@acorncom

This comment has been minimized.

Show comment
Hide comment
@acorncom

acorncom Sep 22, 2017

@satishrao84 it might be worth looking at https://github.com/kirjs/react-highcharts , it's worked well for me

acorncom commented Sep 22, 2017

@satishrao84 it might be worth looking at https://github.com/kirjs/react-highcharts , it's worked well for me

@dhodgin

This comment has been minimized.

Show comment
Hide comment
@dhodgin

dhodgin Oct 31, 2017

I was able to get Highcharts and Highstock working with ES6 imports using webpack successfully with a theme as well all contained in the bundle,js file.

I wrote about the problem on the highcharts-ng repo here pablojim/highcharts-ng#624

The solution was to import highcharts/highstock, then theme, then highcharts-ng in my main app and then add Highcharts in a bundle global in my webpack config and it worked.

*Note: I had to downgrade to highcharts-ng v1.0.1 because 1.1.0 includes Highcharts 5 and forces the Highcharts product to be used. I needed Highstock and reverting back to v1.0.1 doesn't include Highcharts dependency so I could use Highstock v6 and my theme in my bundle without double or triple loading Highcharts on the client side.

EDIT: i was able to get exporting working as well with import ES6 syntax

import Highcharts from "highcharts/highstock";
import "../../js/highcharts.theme";
import "highcharts-ng";
import Exporter from "highcharts/modules/exporting";

// connect exporter to Highcharts bundle global
Exporter(Highcharts);

And in webpack.config setup the Highcharts global for the theme.

  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery",
      "window.jQuery": "jquery",
      Highcharts: "highcharts/highstock"
    })
  ]

dhodgin commented Oct 31, 2017

I was able to get Highcharts and Highstock working with ES6 imports using webpack successfully with a theme as well all contained in the bundle,js file.

I wrote about the problem on the highcharts-ng repo here pablojim/highcharts-ng#624

The solution was to import highcharts/highstock, then theme, then highcharts-ng in my main app and then add Highcharts in a bundle global in my webpack config and it worked.

*Note: I had to downgrade to highcharts-ng v1.0.1 because 1.1.0 includes Highcharts 5 and forces the Highcharts product to be used. I needed Highstock and reverting back to v1.0.1 doesn't include Highcharts dependency so I could use Highstock v6 and my theme in my bundle without double or triple loading Highcharts on the client side.

EDIT: i was able to get exporting working as well with import ES6 syntax

import Highcharts from "highcharts/highstock";
import "../../js/highcharts.theme";
import "highcharts-ng";
import Exporter from "highcharts/modules/exporting";

// connect exporter to Highcharts bundle global
Exporter(Highcharts);

And in webpack.config setup the Highcharts global for the theme.

  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery",
      "window.jQuery": "jquery",
      Highcharts: "highcharts/highstock"
    })
  ]
@dhodgin

This comment has been minimized.

Show comment
Hide comment
@dhodgin

dhodgin Oct 31, 2017

@satishrao84 i was getting the same error when i tried to use a highstock chart but was only loading highcharts. check in your webpack bundle.js for Highstock JS and see if it is being packed into it or if Highcharts is instead. see my comment above on loading highstock with import. i have highstock and a theme working with highcharts-ng but cannot get the exporter to work yet even though it is in the bundle.js and is getting Highcharts injected the menu icon doesn't showup yet on my chart.

dhodgin commented Oct 31, 2017

@satishrao84 i was getting the same error when i tried to use a highstock chart but was only loading highcharts. check in your webpack bundle.js for Highstock JS and see if it is being packed into it or if Highcharts is instead. see my comment above on loading highstock with import. i have highstock and a theme working with highcharts-ng but cannot get the exporter to work yet even though it is in the bundle.js and is getting Highcharts injected the menu icon doesn't showup yet on my chart.

@jon-a-nygaard

This comment has been minimized.

Show comment
Hide comment
@jon-a-nygaard

jon-a-nygaard Nov 1, 2017

Collaborator

This issue is now considered closed, due to updates done in commit 7da7361. This commit improves our documentation on how to load Highcharts in ES6, which I have considered to be the reccuring problem here. I will also apply these updates to www.highcharts.com/docs as well.

Over time this issue has developed into a mix of many different, but similar issues which has become a little difficult to track. If anyone is experiencing a similar problem to this topic, please create a new issue, as it will be easier to then give you appropriate help.

For those who are awaiting our ES6 modules, please follow issue #7186.

Should there be any questions regarding this topic, please give us a comment.

Best regards

Collaborator

jon-a-nygaard commented Nov 1, 2017

This issue is now considered closed, due to updates done in commit 7da7361. This commit improves our documentation on how to load Highcharts in ES6, which I have considered to be the reccuring problem here. I will also apply these updates to www.highcharts.com/docs as well.

Over time this issue has developed into a mix of many different, but similar issues which has become a little difficult to track. If anyone is experiencing a similar problem to this topic, please create a new issue, as it will be easier to then give you appropriate help.

For those who are awaiting our ES6 modules, please follow issue #7186.

Should there be any questions regarding this topic, please give us a comment.

Best regards

@omer123456

This comment has been minimized.

Show comment
Hide comment
@omer123456

omer123456 Jan 28, 2018

it took me a while to find it but i end up using expose

simple install highcharts
and then
import 'expose?highcharts!highcharts/highcharts';

omer123456 commented Jan 28, 2018

it took me a while to find it but i end up using expose

simple install highcharts
and then
import 'expose?highcharts!highcharts/highcharts';

@stonexjr

This comment has been minimized.

Show comment
Hide comment
@stonexjr

stonexjr Apr 22, 2018

The problem with @omer123456 's solution is that you'd get error

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'expose-loader' instead of 'expose',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

One way that works is
in your main js

import Highcharts from 'highcharts';
import 'highcharts-ng'

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

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

This also resolves the issue of Cannot read property 'Chart' of null

stonexjr commented Apr 22, 2018

The problem with @omer123456 's solution is that you'd get error

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'expose-loader' instead of 'expose',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

One way that works is
in your main js

import Highcharts from 'highcharts';
import 'highcharts-ng'

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

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

This also resolves the issue of Cannot read property 'Chart' of null

@chriszrc

This comment has been minimized.

Show comment
Hide comment
@chriszrc

chriszrc Sep 26, 2018

It's mentioned on this thread, but easy to miss; the latest version of highcharts has real es6 modules that work as expected :

#7186

Although it appears the mention of them is still missing from the online docs-

chriszrc commented Sep 26, 2018

It's mentioned on this thread, but easy to miss; the latest version of highcharts has real es6 modules that work as expected :

#7186

Although it appears the mention of them is still missing from the online docs-

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment