Highcharts v3 update break react application

[carlos.pravia]

Hello, we have a react application that currently uses:
-"highcharts": "^11.2.0"
-"highcharts/dashboards": "^1.2.0"

And we are upgrading to:
-"highcharts": "^11.4.8"
-"highcharts/dashboards": "^3.0.0"

But when doing so the application breaks and the dashboard is no longer visible.
We think it might be due other module incompatibility, because the only other changes we applied during the upgrade is calling the right .CSS files and other minor adjustment on styling.

Is there a known issue related to packages that should be avoided or replaced after upgrading?

I cant attach the package-lock.json compressed because of the file size restriction, is about 324kB.

Thanks in advance for all the help.

[carlos.pravia]

Here is attached the package.json:

{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@highcharts/dashboards": "^3.0.0",
"@inovua/reactdatagrid-enterprise": "^5.9.0",
"axios": "^1.3.4",
"firebase": "^9.17.1",
"formik": "^2.2.9",
"highcharts": "^11.4.8",
"lodash": "^4.17.21",
"luxon": "^3.2.1",
"primeflex": "^3.3.1",
"primeicons": "^6.0.1",
"primereact": "^9.0.0",
"proj4": "^2.9.2",
"quill": "^1.3.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.1",
"react-router-hash-link": "^2.4.3",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4",
"yup": "^1.0.0"
},
"scripts": {
"start": "REACT_APP_STAGE=local react-scripts start",
"start-win": "set REACT_APP_STAGE=local&& react-scripts start",
"build-dev": "REACT_APP_STAGE=develop react-scripts build",
"build-prod": "REACT_APP_STAGE=prod react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

[dawid.d]

Hello,

Thanks for your question!

Between v1 and v2 there were most changes in modules, so I guess they are the ones causing the problem. But the solution depend on the usecase, so for now I will send you a live demo of an example Dashboard, and if that doesn't lead you to a solution, please provide more details, and preferably a reproduction of the issue.

Demo: https://stackblitz.com/edit/stackblitz- ... %2FApp.tsx

Hope it was helpful!

Best regards,

[carlos.pravia]

Thank you very much for your example, we were able to reproduce an error that happened during our first try updating the Highchart library (please see attached screenshot hc-dashboard-react-test.png), where the chart is visible behind the error at the browser window. The difference between your example and our first try is the line #9:

Code: Select all

LayoutModule(Dashboards)

Without that line the error is not triggered but the chart stop to render.

We tested the implementation using NodeJS v18 as it is in your example and also we tried using NodeJS v22, but got the same error on both cases.

Please let me know what other additional information would you required we provide to find the cause of the error.

[dawid.d]

Hi,

Thanks for the additional information. I also managed to reproduce this problem, and interestingly, it only occurs when using react with `react-scripts`. When using react with TS, or in Vite, the problem does not occur.

As a solution, I propose importing `es-modules` packages:

Code: Select all

import Dashboards from '@highcharts/dashboards/es-modules/masters/dashboards.src';
import DataGrid from '@highcharts/dashboards/es-modules/masters/datagrid.src';

import '@highcharts/dashboards/es-modules/masters/modules/layout.src';

import '@highcharts/dashboards/css/dashboards.css';
import '@highcharts/dashboards/css/datagrid.css';

Dashboards.DataGridPlugin.custom.connectDataGrid(DataGrid);
Dashboards.PluginHandler.addPlugin(Dashboards.DataGridPlugin);

In this case, everything should work properly even with the `react-scripts`.

Best regards,