Highcharts v12 with NextJS

[julioxavierr]

I'm using Highcharts with NextJS and when trying to update to Highcharts v12, I get the following error:

web:build:  ✓ Compiled successfully
   Collecting page data  .TypeError: Cannot read properties of undefined (reading 'createEvent')
web:build:     at j (/project/node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:2038)
web:build:     at setOptions (/project/node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:16987)
web:build:     at Object.compose (/project/node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts-more.js:9:23390)

From my research, it seems that this issue might be caused by trying to instance a chart on the server-side, which didn't seem to happen before.

While looking at the README of the project, I noticed that the following section was updated with a comment to only init modules if the Highcharts version is below v12.

highcharts-react/README.md

Lines 423 to 436 in 11c276d

	### How to add a module?
	To add a module, import it like so:
	```jsx
	import Highcharts from 'highcharts'
	import highchartsGantt from "highcharts/modules/gantt"; // The Gantt module
	import HighchartsReact from 'highcharts-react-official'
	// Init the module (only for Highcharts v < 12)
	if (typeof highchartsGantt === 'function') {
	highchartsGantt(Highcharts);
	}
	```

However, the NextJS section still says the module should be initiated:

highcharts-react/README.md

Lines 140 to 155 in 11c276d

	### Highcharts with NextJS
	Next.js executes code twice - on server-side and then client-side. First run is done in an environment that lacks `window` and causes Highcharts to be loaded, but not initialized. Easy fix is to place all modules inits in a `if` checking if Highcharts is an object or a function. It should be an object for modules initialization to work without any errors, so code like below is an easy fix:
	```jsx
	import React from 'react'
	import Highcharts from 'highcharts'
	import HighchartsExporting from 'highcharts/modules/exporting'
	import HighchartsReact from 'highcharts-react-official'
	if (typeof Highcharts === 'object') {
	HighchartsExporting(Highcharts)
	}
	...
	```

Which approach should be followed for NextJS? Could the server-side instance attempt be caused by something else?

[julioxavierr]

If I remove all the module inits, as the first piece of documentation says, it builds. However, it crashes when trying to render the chart:

Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=histogram
 - missingModuleFor: histogram
    at Object.eval (webpack-internal:///../../node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:138)
    at j (webpack-internal:///../../node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:2591)
    at T (webpack-internal:///../../node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:61)
    at aR.initSeries (webpack-internal:///../../node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:196458)
    at eval (webpack-internal:///../../node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:212099)
    at Array.forEach (<anonymous>)
    at aR.firstRender (webpack-internal:///../../node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:212077)
    at aR.eval (webpack-internal:///../../node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:196375)
    at j (webpack-internal:///../../node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:2591)
    at aR.init (webpack-internal:///../../node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:195604)
    at new aR (webpack-internal:///../../node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:195314)
    at Object.chart (webpack-internal:///../../node_modules/.pnpm/highcharts@12.0.1/node_modules/highcharts/highcharts.js:9:195188)
    at e (webpack-internal:///../../node_modules/.pnpm/highcharts-react-official@3.2.1_highcharts@12.0.1_react@18.3.1/node_modules/highcharts-react-official/dist/highcharts-react.min.js:1:2479)
    at eval (webpack-internal:///../../node_modules/.pnpm/highcharts-react-official@3.2.1_highcharts@12.0.1_react@18.3.1/node_modules/highcharts-react-official/dist/highcharts-react.min.js:1:3009)
    at commitHookEffectListMount (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:23184:26)
    at safelyCallCommitHookLayoutEffectListMount (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:22898:5)
    at reappearLayoutEffectsOnFiber (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:23554:13)
    at reappearLayoutEffects_complete (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:24872:7)
    at reappearLayoutEffects_begin (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:24860:7)
    at commitLayoutEffects_begin (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:24683:11)
    at commitLayoutEffects_begin (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:24690:11)
    at commitLayoutEffects (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:24646:3)
    at commitRootImpl (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:26857:5)
    at commitRoot (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:26716:5)
    at finishConcurrentRender (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:26015:9)
    at performConcurrentWorkOnRoot (webpack-internal:///../../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.development.js:25843:7)
    at workLoop (webpack-internal:///../../node_modules/.pnpm/scheduler@0.23.2/node_modules/scheduler/cjs/scheduler.development.js:266:34)
    at flushWork (webpack-internal:///../../node_modules/.pnpm/scheduler@0.23.2/node_modules/scheduler/cjs/scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///../../node_modules/.pnpm/scheduler@0.23.2/node_modules/scheduler/cjs/scheduler.development.js:533:21)

[KamilKubik]

Hi julioxavierr, thanks for bringing this up!

From the Highcharts v12 you don't have to initialize the module - you should directly import it instead. Kindly refer to the demo. Also, you have to run Highcharts in the client environment, not the server side (it was not supported in the previous versions either).

I agree that the current documentation may not be clear on this. Therefore, let me know if there's still anything unclear, and I'll leave this thread open until the documentation is updated.

Kind Regards!

[julioxavierr]

@KamilKubik thanks for the quick response time. I'll investigate further and figure out if it's an issue with my setup.

I've also created a demo with pages router in case it's useful for anyone in the future.

[KamilKubik]

@julioxavierr thanks for sharing this example!

It may be worth mentioning the key difference between the pages and app routing approaches in Next.js (in terms of rendering Highcharts). When using the app routing approach (introduced in Next.js v13) the "use client" directive is needed to render the route in the client environment, whereas using the pages routing, the route is rendered on the client by default.

Regards!

[Bugrabugra]

@julioxavierr
Can you achieve to run the code on development and prod environments? In my case when using react 19 with next 15, I can run on dev but I can not build. Highcharts causes problem no matter what I do (importing modules raw, or with Module func) I will try your repos react and next versions.

[Bugrabugra]

no, I couldn't make it work in Next.js 15 or 14, with @julioxavierr 's demo versions or with latest version of Next.js. I have tried react-router@7 even. I am disabling SSR in every projects, there is no way it runs. I am importing map module like this

import "highcharts/modules/map";

or like

import HighchartsMap from "highcharts/modules/map"; HighchartsMap(Highcharts);

I have asked 50 questions to chatgpt as well, tried every suggestions. Even though it works on dev env, it doesn'T build the project, I get

TypeError: Cannot read properties of undefined (reading 'Axis')

error every time. Any help would be great, I got a project from my company with a 2 weeks deadline and I got stucked at the beginning.

[Bugrabugra]

For anyone having the same problem with Next + Highcharts 12, I have tried every solution on internet and with chatgpt. Only solution was downgrading my highcharts to version 11. I have spent like 4 hours on this. here are the things I have tried

"use client";

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HighchartsMap from "highcharts/modules/map";
import HighchartsAccessibility from "highcharts/modules/accessibility";
import { useEffect, useState } from "react";


if (typeof Highcharts === "object") {
  HighchartsMap(Highcharts);
  HighchartsAccessibility(Highcharts);
}

or

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import "highcharts/modules/map";
import "highcharts/modules/accessibility";
import { useEffect, useState } from "react";

none of them worked. By "none of them worked", I mean they run on dev but you get error on build if your next.config.ts is output: "export" (exports only js, css and html, no ssr).

for anyone, this is my working (on dev and build) lib versions

"highcharts": "^11.2.0",
"highcharts-react-official": "^3.2.1",
"next": "^15.0.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",

[julioxavierr]

Hey @Bugrabugra,

Have you tried isolating all your highcharts imports into a single component and loading it with next/dynamic?
That seems to have fixed the build error for me with highcharts v12.

[KamilKubik]

Hi Bugrabugra!

It seems the issue comes from referencing the web API in the node environment during the build. Using the dynamic imports should work as @julioxavierr mentioned, but also, I'd like to refer you to this workaround (to make sure the modules load in the client environment):

"use client";

import { useEffect, useState } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const loadHighchartsModules = async (callback) => {
  Promise.all([
    import("highcharts/modules/map"),
    import("highcharts/modules/exporting"),
    import("highcharts/modules/accessibility"),
  ]).then(callback);
};

export default function Home() {
  const [options, setOptions] = useState(null);

  useEffect(() => {
    loadHighchartsModules(async () => {
      const topology = await fetch(
        "https://code.highcharts.com/mapdata/custom/world.topo.json"
      ).then((response) => response.json());

      setOptions({
        chart: {
          map: topology,
        },
        series: [
          {
            joinBy: ["iso-a3", "code"],
          },
        ],
      });
    });
  }, []);

  if (!options) {
    return <div>Loading...</div>;
  }

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      constructorType="mapChart"
    />
  );
}

[Bugrabugra]

Hey @Bugrabugra,

Have you tried loading isolating all your highcharts imports into a single component and loading it with next/dynamic? That seems to have fixed the build error for me with highcharts v12.

I have tried dynamic import for "highcharts/modules/map" module at the map component. I haven't tried the way you did, like importing all modules inside a component and calling it with dynamic.

[Bugrabugra]

Hi Bugrabugra!

It seems the issue comes from referencing the web API in the node environment during the build. Using the dynamic imports should work as @julioxavierr mentioned, but also, I'd like to refer you to this workaround (to make sure the modules load in the client environment):

"use client";

import { useEffect, useState } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const loadHighchartsModules = async (callback) => {
  Promise.all([
    import("highcharts/modules/map"),
    import("highcharts/modules/exporting"),
    import("highcharts/modules/accessibility"),
  ]).then(callback);
};

export default function Home() {
  const [options, setOptions] = useState(null);

  useEffect(() => {
    loadHighchartsModules(async () => {
      const topology = await fetch(
        "https://code.highcharts.com/mapdata/custom/world.topo.json"
      ).then((response) => response.json());

      setOptions({
        chart: {
          map: topology,
        },
        series: [
          {
            joinBy: ["iso-a3", "code"],
          },
        ],
      });
    });
  }, []);

  if (!options) {
    return <div>Loading...</div>;
  }

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      constructorType="mapChart"
    />
  );
}

Thank you so much, I think this approach was the only thing I haven't tried! It worked at both environments, dev and build.

Thank you!

[wesngu28]

Running into this issue on dev using the recommended method on the client

TypeError: e.chart.options.accessibility is undefined
    o accessibility.js:12
    o accessibility.js:12
    j highcharts.js:9
    j highcharts.js:9
    render highcharts.js:9
    redraw highcharts.js:9
    redraw highcharts.js:9
    redraw highcharts.js:9
    update highcharts.js:9
    d React
 

The above error occurred in the <Unknown> component. It was handled by the <ReactDevOverlay> error boundar
y.

Am i missing something obvious here? It works fine when I build.

[KamilKubik]

Hi @wesngu28, seems the accessibility module works fine with the newest HC version, demo.

Since the issue appears locally (dev), could you reproduce it? Feel free to overwrite the above demo.

Regards!

[wesngu28]

Having troubles replicating it, I'll poke around and see