Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

[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.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] 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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:24 (10 by maintainers)

github_iconTop GitHub Comments

rameshsunkaracommented, Jun 13, 2017

This worked for me. In code:

import` ReactHighcharts from 'react-highcharts';
import highchartsMore from 'highcharts-more';

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

realbuggercommented, Jun 9, 2016

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() {

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

    return (
      <ReactHighcharts isPureConfig config={defaultConfig} />);
Read more comments on GitHub >

github_iconTop Results From Across the Web

webpack error getOptions is not a function - Highcharts
I'm trying to render a solid-gauge chart in Next js. I've been through the posts and issues referring to the error due to...
Read more >
TypeError: this.getOptions is not a function - vue.js
I'm not using Vue BTW, but I must have upgraded node modules and caused a problem. Mainly Bootstrap didn't work. – Greg. Mar...
Read more >
JavaScript error when using Highcharts – iTecNote
Uncaught TypeError: n.getOptions is not a function(anonymous function) @ highcharts-more.js:8(anonymous function) @ highcharts-more.js:55.
Read more >
Highcharts requires a js file. How can I load it and make it ...
If I do this, I get the following (run-time) error: TypeError: highcharts_more_1.default is not a function but hovering over HighchartsMore ...
Read more >
'this.getOptions is not a function' when trying to use html-loader
Hey guys, so long story short, I'm trying to embed a Unity WebGL build in my Vue 3 page through an iframe. I...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found