Issue: SeriesRegistry, AST & Undefined Errors in Highcharts Integration (Next.js >15 & React >19)

[rickybharti]

Description:
DEMO LINK : https://replit.com/@rickybharti01/RundownLimeMoto

While attempting to integrate Highcharts and Highcharts React Official into a Next.js 15.1.2 app, the following errors occur:
1. SeriesRegistry TypeError:
• Errors like Cannot read properties of undefined (reading 'SeriesRegistry') imply an issue with Highcharts module initialization, potentially due to version mismatches or missing configurations.
2. AST Undefined Error:
• Cannot read properties of undefined (reading 'AST') is another sign of improper module integration or compatibility issues
3. Build and ESLint Errors:
• During npm run build, the build process fails with:
• TypeError: Cannot read properties of undefined (reading 'SeriesRegistry').
• ESLint error: Cannot serialize key "parse" in parser: Function values are not supported.

Steps to Reproduce:
1. Install Dependencies:
• Run: npm install highcharts highcharts-react-official.
2. Run Development Server:
• Command: npm run dev.
• Errors occur when accessing the app at the local server address (e.g., http://localhost:3000).
3. Build for Production:
• Command: npm run build.
• Fails with TypeError: Cannot read properties of undefined (reading 'SeriesRegistry').

Observations:
• Highcharts Version: 12.1.0
• Highcharts React Official Version: 3.2.1
• Next.js: 15.1.2
• React: >19
• Multiple ports (3000, 3001, 3002) were tried without success.

[KamilKubik]

Hi @rickybharti, thanks for reporting this!

We're working to put this right. Could you confirm if this workaround works fine for you?

Also, check the related thread.

Kind Regards!

[aParadowski]

Im seeing the same "TypeError: Cannot read properties of undefined (reading 'SeriesRegistry')" in a react 18.3 environment after updating to highcharts: 12.1.2. The migration worked fine for the components themselves within storybook, but I see the same type error when trying a simple "It renders" test in jest. The module I am trying to use is the highcharts/highcharts-more module for a BubbleChart.

• Highcharts Version: 12.1.2
• Highcharts React Official Version: 3.2.1
• React: 18.3.1
• Jest: 29.7.0

I notice the tests in this repo are still following the old pattern of initializing the modules with
HCmore(Highcharts);.

[KamilKubik]

Hi @aParadowski!

I agree that the tests should follow the new module importing statements described here. I'll leave this thread open until this is fixed.

To be sure, what environment do you use for testing? Jest runs tests in the node environment, which may affect the imports as the browser API reference is missing. Have you tested it in a browser-like environment, like jsdom?

Regards!

[aParadowski]

Hey @KamilKubik , thanks for the quick reply! We are using the jest-environment-jsdom set as our test environment. The implementation of the component is relatively simple, for instance this is our BubbleChart:

import merge from 'deepmerge';
import type { Options } from 'highcharts';
import 'highcharts/highcharts-more';
import type { FunctionComponent } from 'react';
import type { DeepOmit } from 'ts-essentials';

import type { HighChartProps } from '../../utils/highchartOptions';
import { highChartTheme, sharedDefaultOptions } from '../../utils/highchartOptions';
import { BaseChart } from '../BaseChart';

const immutableOptions: Options = {
  chart: { type: 'bubble' },
};

export type BubbleChartOptions = DeepOmit<Options, { chart: { type: true } }>;

const defaultOptions = merge<Options>(sharedDefaultOptions, {});

export const BubbleChart: FunctionComponent<{ options: BubbleChartOptions } & HighChartProps> = ({
  options,
  callback,
}) => (
  <BaseChart
    callback={callback}
    defaultOptions={defaultOptions}
    immutableOptions={immutableOptions}
    options={options}
  />
);

with the BaseChart simply being a HighChartsReact component that accepts the props from the name component implementation. I see a similar error in HeatMap using import 'highcharts/modules/heatmap'; where the test fails with TypeError: Cannot read properties of undefined (reading 'Axis').

The complete jest config is as follows:

module.exports = {
  clearMocks: true,
  collectCoverageFrom: [
    '<rootDir>/src/**/*.{js,jsx,ts,tsx}',
    '!<rootDir>/src/**/*.{test,spec}.{js,jsx,ts,tsx}', // no tests
    '!<rootDir>/src/**/__tests__/**', // no tests continued
  ],
  coverageDirectory: '<rootDir>/coverage',
  coverageReporters: ['text', 'lcov', 'cobertura'],
  reporters: ['default', 'jest-junit'],
  setupFilesAfterEnv: determineJestSetupFile(),
  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
  transformIgnorePatterns: makeTransformIgnorePatterns([]),
  collectCoverageFrom: [
    ...configBase.collectCoverageFrom,
    '!<rootDir>/src/**/*.{stories}.{js,jsx,ts,tsx}', // no storybook-js files
  ],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
    '^src/(.*)$': '<rootDir>/src/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
  testEnvironmentOptions: {
    customExportConditions: ['require', 'node'],
  },
  transform: {
    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|less|sass|scss|json)$)': resolve(__dirname, 'transforms/fileTransform.js'),
    '^.+\\.(css|less|sass|scss)$': resolve(__dirname, 'transforms/cssTransform.js'),
    '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': 'babel-jest',
  },
};

Other charts are working fine (Area, Bar, Line, etc.) for what its worth.

[KamilKubik]

@aParadowski thanks for the clarification!

I've performed testing using two approaches (both seem to work fine):

1. I tried your Jest configuration and the chart gets rendered properly. Note that I get the same error when using the node environment. Also, here's my Babel configuration:

module.exports = {
  presets: [
    "@babel/preset-env",
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};

2. I tried the @testing-library/jest-dom (imported inside the tests setup file) package without any extra Jest configuration, and it also renders the chart properly. Here's my test:

test('renders the bubble chart', () => {
  render(<BubbleChart />);
  const chartContainer = screen.getByTestId('highcharts-container');
  expect(chartContainer).toBeInTheDocument();
});

For both approaches, I used the @testing-library/react package, and here's the chart component:

import React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

import "highcharts/highcharts-more";
import "highcharts/modules/accessibility";

const BubbleChart = () => {
  const options = {
    series: [
      {
        type: "bubble",
        data: [1, 3, 2, 4, 5],
      },
    ],
  };

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
      containerProps={{ "data-testid": "highcharts-container" }}
    />
  );
};

export default BubbleChart;

Despite the above working, I see the same error running tests in the node environment (missing the browser API). Could you test it, and see if you managed to render the chart properly?

If that's not helpful, can you share your test file so I can have the complete reproducible implementation?

Regards!

[aParadowski]

@KamilKubik sorry for not responding sooner, been catching up on other work! I took a step back and tested your BubbleChart implementation with my existing test setup and it seems to work, leading me to assume the issue is somewhere in our BaseChart component which does some general setup all the charts inherit from and not much else, so I dont know what would be wrong there. Could it be the import of the Highcharts instance or HighChartsReact in another component makes it unavailable in the test environment? For reference, this is the content of BaseChart.tsx, I'll take a deeper look into this but if you see something obvious feel free to set me straight!

import merge from 'deepmerge';
import type { Options } from 'highcharts';
import Highcharts from 'highcharts';
import 'highcharts/modules/accessibility';
import 'highcharts/modules/boost';
import HighchartsReact from 'highcharts-react-official';
import type { FunctionComponent } from 'react';

import type { HighChartProps } from '../../utils/highchartOptions';
import { highChartTheme } from '../../utils/highchartOptions';

type BaseChartProps = {
  defaultOptions: Options;
  immutableOptions: Options;
  options: Options;
};

export const BaseChart: FunctionComponent<BaseChartProps & HighChartProps> = ({
  defaultOptions,
  immutableOptions,
  options,
  callback,
}) => {
  Highcharts.setOptions(highChartTheme);

  return (
    <HighchartsReact
      callback={callback}
      highcharts={Highcharts}
      options={merge.all([defaultOptions, options, immutableOptions])}
    />
  );
};

[KamilKubik]

@aParadowski as I'm not seeing your chart options could you also narrow the debugging by:

1. Removing the setOptions and its related theming options import.
2. Setting very basic chart configuration, and removing the chart options related imports.

If the above, simple chart configuration works fine for you, we should consider checking any other imports/specific options in your imported, external files.

Also, I'd like to highly encourage you to take a look at the open discussion under the related thread. It seems there are a few suggestions that can fix it in your environment. I think you should at least try:

1. Loading the modules from the es-modules folder.
2. Changing the imports order (referencing this comment that was recently added).

Looking forward to your response,
Regards!

[aParadowski]

@KamilKubik it looks like import order was the source of my issue. The BaseChart component imports the Highchart instance and applies it to the HighChartsReact component and each specific "chart" component imports BaseChart after its highchart modules. Moving import { BaseChart } from '../BaseChart'; to the top of the import list fixes all tests (except for DependencyWheel, in that case I had to swap the import order of 'highcharts/modules/sankey' and 'highcharts/modules/dependency-wheel').

I see in the linked comment it mentions it is best practice to import the 'highcharts/modules/accessibility' module after all others. For our use case, the BaseChart also imports the 'highcharts/modules/accessibility' and 'highcharts/modules/boost' modules so all charts can inherit them from the parent component. However, changing import order means we'll be importing the boost and accessbility modules before the product modules. Does this pattern make sense given the importance of import order? Should we move these modules to the chart component files themselves? Is there any documentation regarding proper order we can reference?

[KamilKubik]

@aParadowski I'm glad you made it work!

Since we are working on a stable solution, let me leave this thread open until everything is handled properly so the specific docs can be shared.

Answering your question, you should follow the mentioned pattern to ensure the accessibility module will apply to all the functionalities coming from the other, product modules. There's a similar case with the boost module that as the documentation stands (under the Including the Boost module... Note section) should be imported last. Following these guidelines, you should either import these modules inside a child component or consider importing them all into your shared BaseChart component, maintaining the correct order.

Nevertheless, @bre1470, is there anything that can be added to this statement, considering the case?