Next Js HighStock

[aduialistaken]

Hello, I have been trying to set up a stock chart in next js. However, I keep getting the following error:
TypeError: (0 , {imported module [project]/nodemodules/highcharts/modules/exporting.js [app-client] (ecmascript)}.default) is not a function.
My code is like the following:

Code: Select all

"use client";

import React, { useRef } from "react";
import * as Highcharts from "highcharts/highstock";
import HighchartsExporting from "highcharts/modules/exporting";
import { HighchartsReact } from "highcharts-react-official";

if (typeof Highcharts === "object") {
  HighchartsExporting(Highcharts);
}

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

const PriceVolChart = (props: HighchartsReact.Props) => {
  const chartComponentRef = useRef<HighchartsReact.RefObject>(null);

  return (
    <HighchartsReact
      highcharts={Highcharts}
      constructorType="stockChart"
      options={options}
      ref={chartComponentRef}
      {...props}
    />
  );
};

export default PriceVolChart;

.
I also tried

Code: Select all

"use client";

import React, { useRef } from "react";
import Highcharts from "highcharts/es-modules/masters/highstock.src.js";
import { HighchartsReact } from "highcharts-react-official";
import "highcharts/es-modules/masters/modules/boost.src.js";
import "highcharts/es-modules/masters/modules/boost.src.js";
import "highcharts/es-modules/masters/modules/accessibility.src.js";

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

const PriceVolChart = (props: HighchartsReact.Props) => {
  const chartComponentRef = useRef<HighchartsReact.RefObject>(null);

  return (
    <HighchartsReact
      highcharts={Highcharts}
      constructorType="stockChart"
      options={options}
      ref={chartComponentRef}
      {...props}
    />
  );
};

export default PriceVolChart;

.
But then I got the following error:
⨯ TypeError: Cannot read properties of undefined (reading 'createEvent').
How can I properly implement a stock chart in next js?

[andrzej.b]

Hi,

Welcome to the forum and thank you for reaching out with your question.

Quick note: if you are using Higcharts v12, you need to adjust the imports as per update notes in the changelog here: https://www.highcharts.com/changelog/#h ... ts-v12.0.0
Could you reproduce the issue in an online editor that I could work on?

Kind regards,

[aduialistaken]

Hello, thanks for your reply.

You can refer to the following code to the view the error: https://codesandbox.io/p/devbox/7td5yf.

Also, since the imports like "import HighchartsExporting from "highcharts/modules/exporting"; doesn't work anymore, do we still need to somehow add the
"if (typeof Highcharts === 'object')" checking as mentioned in the documentation https://github.com/highcharts/highcharts-react?

[andrzej.b]

Hi,

The demo you shared is not working.
As for the if (typeof Highcharts === 'object') check, it's not necessary with the new import style in v12. This check was typically used in environments where you needed to ensure that Highcharts was loaded before using it, but with ES module imports, this is handled by the module system itself. So, you can safely omit that part in your setup.

Best,

[aduialistaken]

Hello,

Thank you. Can you tell me the part that is not working? The error message pops in the terminal after executing "yarn dev". I think you need to be logged in to fork the devbox and access the terminal. I am also attaching the screenshot of the error I get on my side.

Screenshot 2025-01-10 at 1.36.59 PM.png (28.72 KiB) Viewed 777 times

[andrzej.b]

Hi,

I believe you should find a solution in this thread: https://github.com/highcharts/highchart ... issues/502 if not, please add your comments there to get the support from the dedicated team.

Kin regards,