react-highcharts: TypeError: m.getOptions is not a function with highcharts-more

So I was trying to add a arearange chart and figured that I need highcharts-more. After installing highcarts-more npm package, I FIRST started the webpack dev server, THEN added following lines to my code:

import ReactHighcharts from 'react-highcharts';
import highchartsMore from 'highcharts-more'; // <= new line
highchartsMore(ReactHighcharts.Highcharts);  // <= new line

With that, I could create an arearange chart without problem. Everything worked as expected. (note that I had to use lowercase highchartsMore instead of HighchartsMore because eslint syntax complaint.)

Some point later, I need to restart the webpack dev server. All of sudden I got the error message below upon starting the server.

C:\code\node_modules\highcharts-more\more.js:8
[1] (function(m){typeof module==="object"&&module.exports?module.exports=m:m(Highcharts)})(function(m){function J(a,b,c){this.init(a,b,c)}var O=m.arrayMin,P=m.arrayMax,s=m.each,F=m.extend,t=m.merge,Q=m.map,q=m.pick,A=m.pInt,o=m.getOptions().plotOptions,k=m.seriesTypes,u=m.extendClass,K=m.splat,v=m.wrap,L=m.Axis,y=m.Tick,G=m.Point,R=m.Pointer,S=m.CenteredSeriesMixin,B=m.TrackerMixin,w=m.Series,x=Math,E=x.round,C=x.floor,M=x.max,T=m.Color,r=function(){};F(J.prototype,{init:function(a,b,c){var d=this,g=
[1]                                                                                                                                                                                                                                 ^
[1]
[1] TypeError: m.getOptions is not a function
[1]     at C:\code\node_modules\highcharts-more\more.js:8:225
[1]     at Object.<anonymous> (myHighcharts.js:6:1)
[1]     at Module._compile (module.js:413:34)
[1]     at loader (C:\code\node_modules\babel-register\lib\node.js:158:5)
[1]     at require.extensions.(anonymous function) (C:\code\node_modules\babel-register\lib\node.js:168:7)
[1]     at Object._module3.default._extensions.(anonymous function) [as .js] (C:\code\node_modules\require-hacker\babel-transpiled-modules\require hacker.js:250:71)
[1]     at Module.load (module.js:357:32)
[1]     at Module._load (module.js:314:12)
[1]     at Function.module._load (C:\code\node_modules\piping\lib\piping.js:212:16)
[1]     at Module.require (module.js:367:17)

Apparently it’s complaining a undefined function, which IS defined in highcharts/highcharts.js. But my guess is that somehow webpack doesn’t see the reference, thus complains. Actually, if I remove the two lines I added, start dev server, THEN add them in, everything works. This might be a problem specific to my dev environment, but I’d like to see if anyone has encountered similar problem and how it got addressed.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 24 (10 by maintainers)

Most upvoted comments

This worked for me. In code:

import` ReactHighcharts from 'react-highcharts';
import highchartsMore from 'highcharts-more';
highchartsMore(ReactHighcharts.Highcharts);

and the webpack-config:

 highcharts: [      
            {
                test: /highcharts\/highcharts-more\.src\.js/,
                use: ['imports-loader?module=>undefined,Highcharts=highcharts'],
            },
        ],

Version: highcharts: 4.2.6 webpack: 2.x

rameshsunkara on Jun 13, 2017

With a bit more digging, I figured out a workaround for this problem. My understanding is that, my specific dev environment setup checks for undefined function upon startup, which would throw an error when highcharts-more refers to an function that is undefined until Highcharts object is there (correct me if I’m wrong). This may explain why I could add highcharts-more after I started the dev server when I already have a Highcharts object. To workaround the problem, I moved highchartsMore(ReactHighcharts.Highcharts); into componentWillMount. Problem solved.

Here is the simplified code for reference:

import React, {Component} from 'react';
import ReactHighcharts from 'react-highcharts';
import highchartsMore from 'highcharts-more';
// highchartsMore(ReactHighcharts.Highcharts); <== this doesn't work

const range = [
  ['2016-01-01', 22, 54],
  ['2016-01-02', 18, 84],
  ['2016-01-03', 32, 45],
  ['2016-01-04', 22, 53],
];

export default class HighchartsTest extends Component {
  componentWillMount() {
    highchartsMore(ReactHighcharts.Highcharts);
  }

  render() {
    // console.log(highchartsMore.getDefaultProps);
    const defaultConfig = {
      chart: {
        type: 'arearange',
      },
      xAxis: {
        categories: range.map(dataPoint => dataPoint[0]),
      },
      yAxis: [{ // Primary yAxis
        min: 0,
      }],
      series: [{
        name: 'range',
        data: range,
        lineWidth: 0,
        linkedTo: ':previous',
        zIndex: 0
      }]
    };

    return (
      <ReactHighcharts isPureConfig config={defaultConfig} />);
  }
}

realbugger on Jun 9, 2016