Next.js 14.1.0 Cannot read properties of undefined (reading 'document')

[dbani-dev-shell]

I am getting the following error running Highcharts in Next.js 14.1.0.

../node_modules/.pnpm/[email protected]/node_modules/highcharts/highcharts.js @ document
 ⨯ TypeError: Cannot read properties of undefined (reading 'document')

Component:

"use client"
import { forwardRef } from "react";
import Highcharts from "highcharts/highcharts";
import { HighchartsReact } from "highcharts-react-official";
import HighchartsBoost from "highcharts/modules/boost";

if (typeof window !== "undefined" && typeof Highcharts === "object") {
  HighchartsBoost(Highcharts);
}

const Chart = forwardRef(function Chart(
  props: Highcharts.Options,
  ref: React.ForwardedRef<HighchartsReact.RefObject>
): React.ReactElement {
  // options
  const chartOptions: Highcharts.Options = {
    chart: {
      styledMode: true,
    },
    credits: { enabled: false },
    exporting: {
      enabled: false,
      fallbackToExportServer: false,
    },
    title: { text: "" },
    subtitle: { text: "" },
    ...props,
  };

  return (
    <div className="highcharts h-full relative">
      <HighchartsReact
        containerProps={{
          style: { height: "100%", paddingTop: 10 },
        }}
        highcharts={Highcharts}
        options={chartOptions}
        ref={ref}
      />
    </div>
  );
});

export { Chart };

[ppotaczek]

Hi @dbani-dev-shell,

Thank you for contacting us!

This problem has been already reported on the main Highcharts repository: https://github.com/highcharts/highcharts/issues/20129

Please check the thread above and use one of the suggested workarounds or update you Highcharts version.

Best regards!

[ppotaczek]

Closed due to inactivity.