Unknown Javascript error with Highcharts on Vaadin 24

Flow
1

Hello everyone,
We are migrating our solution from Vaadin 14 to Vaadin 24.
When testing Highcharts, we are facing this error and charts do not display correctly.

Are there prerequisites for migration?
image.png

2

There are none, but it always comes down to what you have done to implement it in v14 and so on. So more context is probably required to get a hold of the problem

3

final Chart newChart = new Chart();
newChart.getConfiguration().getChart().setStyledMode(true);
add(newChart);

Anyway, I do not get why API usage would lead to a javascript error.
How could I check if it does not happen because of Nodjs or downloaded libraries?

4

It could lead to a Javascript error if the dependency couldn’t be loaded correctly, e.g. using the version not coming from the platform BOM

5

According to json and node_modules files , it is the 9.2.2 version
I am using Vaading 24.1.12

Is this correct?

6

Yeah that’s correct. Do you use the frontend bundles introduced in 24? Or vite?

7

I have both vite files and dev-bundle in frontend folder generated , so I am not sure what to answer

8

I hope it is related to the dev bundle… so I would suggest to delete it (the dev bundle folder) and deactivate it for a simple test

https://vaadin.com/docs/latest/configuration/development-mode “Disabling the Pre-Compiled Bundle”

9

Same error, but with another source
image.png

10

Interesting… never happened to me… are you creating the charts e.g. in another maven module or another package which isn’t below your main application entry point?

11

Absolutly not.
The chart is created at HomePage in the same project as Main class.

Does NodeJS version can interfere?

12

It shouldn’t, unsupported nodejs versions would cause Vaadin to download its own.

@versatile-zorse do you happen to have an idea what cause could this? Looks like flow doesn’t add the Javascript dependencies correctly

13

No ideas. It would be interesting to try in a new project and see if it works or not

14

I would also try with the @Uses annotation to see if something changes

15

I am not at the laptop right now, so I can’t give it a try

16

Good idea with Uses! Even tho I would hope Mainlayout is the main layout of the app and probably scanned :grimacing:

17

I would probably try the hotdeploy=true to see if it’s working and also check the logs on the server side when the front-end is built. Development Mode | Configuration | Vaadin Docs

18

Excellent idea!

19

That was suggested from me above and sadly didn’t help, but it changed the error message

20

What is the @uses annotation please?
Is it Java?