randerson
Posts: 21
Joined: Tue Apr 05, 2022 7:49 pm

React Dashboards Failing to Compile

Hi,

We have a react app where we successfully are able to use the Highcharts react wrapper. However, we now have a need to use the Highcharts Dashboards, and have attempted to install and import the package via the npm instructions found here: https://www.highcharts.com/docs/dashboa ... with-react.

Installation is successful, however when trying to

Code: Select all

import Dashboards from '@highcharts/dashboards'
, the code fails to compile and provides an error stating:

"./node_modules/@highcharts/dashboards/dashboards.js 258:23
Module parse failed: Unexpected token (258:23)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders."

Our app was created with Create React App (CRA), and it seems there is something in the Dashboards library that doesn't work well with babel-loader.

Is there any insight you can provide us?
User avatar
dawid.d
Site Moderator
Posts: 956
Joined: Thu Oct 06, 2022 11:31 am

Re: React Dashboards Failing to Compile

Hello,

Thanks for the question!

Are you able to reproduce this problem using e.g. stackblitz? I am unable to reproduce this issue on my side, see the demo below.

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

Best regards!
Dawid Draguła
Highcharts Developer
randerson
Posts: 21
Joined: Tue Apr 05, 2022 7:49 pm

Re: React Dashboards Failing to Compile

Hi,

Thanks for the response! I've created the following link which is an example of our issue.

https://codesandbox.io/p/devbox/adoring ... A3934%2C24

When you run `npm start` here, you should see the error occur.
User avatar
dawid.d
Site Moderator
Posts: 956
Joined: Thu Oct 06, 2022 11:31 am

Re: React Dashboards Failing to Compile

I'm having quite a hard time debugging this problem. Can you check if you are able to create a basic dashboard without importing & using the layout module? Recently I noticed that we had a bug importing es-modules there. I don't know if this could be related to the problem you're experiencing.
Dawid Draguła
Highcharts Developer
randerson
Posts: 21
Joined: Tue Apr 05, 2022 7:49 pm

Re: React Dashboards Failing to Compile

Hi,

It certainly seems to be a tricky issue!

I've updated the example to not import or use the layout module, and the dashboard config is just an empty object (to eliminate any issues generated from the setup of the specific dashboard). The issue still persists:

https://codesandbox.io/p/devbox/adoring ... ked-3yxgp5
User avatar
dawid.d
Site Moderator
Posts: 956
Joined: Thu Oct 06, 2022 11:31 am

Re: React Dashboards Failing to Compile

Hello,

I was able to reproduce this locally. There is indeed a compatibility problem with babel, but I see that if you use es-modules instead, you will get rid of the error most likely.

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';
Let me know if it worked for you.
Best regards!
Dawid Draguła
Highcharts Developer
ZukaBriek
Posts: 7
Joined: Fri May 17, 2024 8:09 am

Re: React Dashboards Failing to Compile

it's don't work for me :(
randerson
Posts: 21
Joined: Tue Apr 05, 2022 7:49 pm

Re: React Dashboards Failing to Compile

Hi,

Unfortunately, this did not solve the issue. It did slightly change the error that we receive, but it still seems to be a compatibility issue with Babel.

"./node_modules/@highcharts/dashboards/es-modules/Dashboards/Board.js 100:58
Module parse failed: Unexpected token (100:58)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| this.dataPool = new DataPool(options.dataPool);
| this.id = uniqueKey();
> this.guiEnabled = !options.gui ? false : this.options?.gui?.enabled;
| this.editModeEnabled = !options.editMode ? false : this.options?.editMode?.enabled;
| this.layouts = [];"

You can see this issue still occurring here:

https://codesandbox.io/p/devbox/adoring ... ked-3yxgp5

Please let me know if there is any other option to fix this and/or if there are plans to fix this compatibility issue.

Thanks!
User avatar
dawid.d
Site Moderator
Posts: 956
Joined: Thu Oct 06, 2022 11:31 am

Re: React Dashboards Failing to Compile

I created a repository that you can use for debugging. It seems to be some kind of edge case. In my case it works with react in JS, babel etc. Is there anything in your case that is glaringly different from mine?

SRC: https://github.com/vazonik/highcharts-react-babel
Dawid Draguła
Highcharts Developer
randerson
Posts: 21
Joined: Tue Apr 05, 2022 7:49 pm

Re: React Dashboards Failing to Compile

Hi,

The main difference I noticed in your repo compared to our example is your versions for react, react-dom, and react-scripts. We are using slightly older versions of those in our package.json. I tried updating those three to your versions in our sandbox example, and that seems to solve the issue of the incompatibility with babel-loader. However, after that I am met with the Layout module issue I think you previously alluded to. I was able to successfully create a dashboard in our sandbox example by implementing it with a custom layout, without the provided Layout module. However, we would prefer to use the provided Layout module, if possible.

I will need to confirm with our team if upgrading these package versions is an option for our application, otherwise it seems there is an ongoing incompatibility with Highcharts Dashboard and slightly older versions of react, react-dom, and/or react-scripts. If this incompatibility could be resolved in the meantime, that would be even better :) .

Here is the updated sandbox showing the manually created layout version of a dashboard working with newer versions of those packages:

https://codesandbox.io/p/devbox/adoring ... ked-3yxgp5

For reference, our current versions of the packages in question are:

react: "=17.0.2",
react-dom: "=17.0.2",
react-scripts: "=4.0.3"

Thanks!
randerson
Posts: 21
Joined: Tue Apr 05, 2022 7:49 pm

Re: React Dashboards Failing to Compile

One additional update:

It seems like the main issue is with the version of react-scripts. I've left the versions of react and react-dom as 17.0.2, as we have it, and only updated react-scripts to 5.0.1. I am able to compile and run the app with those changes. So, I believe the incompatibility is something between Highcharts Dashboards and previous version(s) of react-scripts. Hopefully this helps you pinpoint the issue that needs to be resolved!

https://codesandbox.io/p/devbox/adoring ... ked-3yxgp5

Thanks!
randerson
Posts: 21
Joined: Tue Apr 05, 2022 7:49 pm

Re: React Dashboards Failing to Compile

Hi, is there any update on identifying and fixing the incompatibility with HC Dashboards and react-scripts, et al?

Thanks!
User avatar
dawid.d
Site Moderator
Posts: 956
Joined: Thu Oct 06, 2022 11:31 am

Re: React Dashboards Failing to Compile

Hello,

unfortunately we have not been able to find the cause of this problem yet. Anyway, remember that the use of ES modules is fully supported, so the Layout Module should work as well. Just import it like this:

Code: Select all

import '@highcharts/dashboards/es-modules/masters/modules/layout.src';
And then you don't have to register it anymore using LayoutModule(Dashboards) function, as you would do otherwise because es modules will do it for you.
Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Dashboards”