Highchart React not rendering heat map after refresh its throwing error

Question

Import statement for high charts :

// Import Highcharts
   import Highcharts from 'highcharts';
   import HighchartsReact from "highcharts-react-official";
   import HighchartsHeatmap from 'highcharts/modules/heatmap';
// Load Highmaps as a module
    HighchartsHeatmap(Highcharts);

In the render I am using the below component

 <HighchartsReact highcharts={Highcharts} options={chartOptions} />

On the initial render i am getting output where as after i do manual refresh i am facing the below error.

Answer 1

You can find a working demo here: https://codesandbox.io/s/highcharts-react-demo-forked-6evf4

import React from "react";
import { render } from "react-dom";
// Import Highcharts
import Highcharts from "highcharts";
import HighchartsHeatmap from "highcharts/modules/heatmap";
import HighchartsReact from "highcharts-react-official";

HighchartsHeatmap(Highcharts);