Cannot read property 'destroy' of undefined

I can’t get the type arearange chart to work with reach-highcharts. I used a config and data from an example from the Highcharts webpage.

The data:

const rangesTwo = [ [1246406400000, 14.3, 27.7], [1246492800000, 14.5, 27.8], [1246579200000, 15.5, 29.6], [1246665600000, 16.7, 30.7], [1246752000000, 16.5, 25.0], [1246838400000, 17.8, 25.7], [1246924800000, 13.5, 24.8], [1247011200000, 10.5, 21.4], [1247097600000, 9.2, 23.8], [1247184000000, 11.6, 21.8], [1247270400000, 10.7, 23.7], [1247356800000, 11.0, 23.3], [1247443200000, 11.6, 23.7], [1247529600000, 11.8, 20.7], [1247616000000, 12.6, 22.4], [1247702400000, 13.6, 19.6], [1247788800000, 11.4, 22.6], [1247875200000, 13.2, 25.0], [1247961600000, 14.2, 21.6], [1248048000000, 13.1, 17.1], [1248134400000, 12.2, 15.5], [1248220800000, 12.0, 20.8], [1248307200000, 12.0, 17.1], [1248393600000, 12.7, 18.3], [1248480000000, 12.4, 19.4], [1248566400000, 12.6, 19.9], [1248652800000, 11.9, 20.2], [1248739200000, 11.0, 19.3], [1248825600000, 10.8, 17.8], [1248912000000, 11.8, 18.5], [1248998400000, 10.8, 16.1], ];

The config `const options2 = { title: { text: ‘July temperatures’, },

xAxis: {
  type: 'datetime',
},

yAxis: {
  title: {
    text: null,
  },
},

tooltip: {
  crosshairs: true,
  shared: true,
  valueSuffix: '°C',
},

legend: {},

series: [
  {
    name: 'Range',
    data: rangesTwo,
    type: 'arearange',
    color: Highcharts.getOptions().colors[0],
    fillOpacity: 0.3,
    zIndex: 0,
    marker: {
      enabled: false,
    },
  },
],

};`

And then I simply use this config in a: <ReactHighcharts config={options2} />

Cannot read property 'destroy' of undefined
TypeError: Cannot read property 'destroy' of undefined
    at Object.componentWillUnmount (http://localhost:9009/static/preview.bundle.js:50893:17)
    at Object.chainedFunction [as componentWillUnmount] (http://localhost:9009/static/preview.bundle.js:50470:11)
    at http://localhost:9009/static/preview.bundle.js:30491:25
    at measureLifeCyclePerf (http://localhost:9009/static/preview.bundle.js:30158:12)
    at ReactCompositeComponentWrapper.unmountComponent (http://localhost:9009/static/preview.bundle.js:30490:11)
    at Object.unmountComponent (http://localhost:9009/static/preview.bundle.js:3939:22)
    at Object.unmountChildren (http://localhost:9009/static/preview.bundle.js:30037:25)
    at ReactDOMComponent.unmountChildren (http://localhost:9009/static/preview.bundle.js:34954:28)
    at ReactDOMComponent.unmountComponent (http://localhost:9009/static/preview.bundle.js:32094:10)
    at Object.unmountComponent (http://localhost:9009/static/preview.bundle.js:3939:22)

The problem seems to be with the type of chart in the config. Type: Line works perfectly.

[truetopwebghost]

seems like I’ve found the solution.

import ReactHighChart from 'react-highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import SolidGauge from 'highcharts/modules/solid-gauge';

...

  constructor (props) {
    super(props);
    HighchartsMore(ReactHighChart.Highcharts);
    SolidGauge(ReactHighChart.Highcharts);
  }

...

This works properly. @smmccrohan , try this.

[sappleg]

I’m getting this same error with a solidgauge chart.

react: 15.5.4 react-highcharts: 12.0.0 highcharts: 5.0.12