highcharts_react_official_1 is not defined

[ppotaczek]

Hi ,
Created the React component as blow

import React, { useRef } from 'react';
import * as Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const options: Highcharts.Options = {
  title: {
    text: 'My chart',
  },
  series: [
    {
      type: 'line',
      data: [1, 2, 3],
    },
  ],
};

const App = (props: HighchartsReact.Props) => {
  return (
    <HighchartsReact highcharts={Highcharts} options={options} {...props} />
  );
};

export default App;

I have installed below packages

 npm install highcharts
 npm install highcharts-react-official

I was facing problem that Uncaught ReferenceError: highcharts_react_official_1 is not defined
below version config
Node -v=>14.20.0
NPM -v=>6.14.17
React -v=>17.0.2

Originally posted by @Revanth12-creator in #23 (comment)

[ppotaczek]

@Revanth12-creator, your problem is not related to using React components with Highcharts formatters, so I created a separate thread.

As to your issue, it looks that highcharts-react-official has not been correctly installed in your project. Please check if there are a proper files ('highcharts-react-official' folder) in your node modules. This problem can be also related to #397, so you can try to use named import.

[Revanth12-creator]

@ppotaczek ,Thanks for your response.

The issue is resloved , I have updated the import as below.

import * as Highcharts from 'highcharts';
import * as HighchartsReact from 'highcharts-react-official';

const chartComponentRef =
React.useRef<HighchartsReact.default.RefObject>(null);

<HighchartsReact.HighchartsReact
highcharts={Highcharts}
options={{
chart: {
type: 'column',
},
title: {
text: 'Chart with time',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
hour: '%H:%M',
},
},
series: [
{
data: seriesData,
},
],
}}
ref={chartComponentRef}
{...props}
/>

This is woking as expected.