Vaadin 23.2.5 External Components

Hello, does anyone have any example on how to integrate external npm components using vaadin 23.2.5 and Vite?

I’m trying to upgrade from Vaadin 23.1.* to 23.2.* and I am having a lot of issues. The issues seems to be related to the external components I integrated. The components work correctly with webpack.

The application enters an infinite loop and refreshes the browser automatically, I barely can see the error in the console log but from what I can see the npm modules are not being loaded correctly in the page.

Any help would be greatly appreciated.

Thanks

First thing that comes to mind is doing the vaadin dance. Making sure you clean the frontend resources:

mvn vaadin:clean-frontend vaadin:dance

Thanks for your answer. I just tried it and the output shows multiple errors, they are mostly related to the vaadin core components.

Can you share your build output?

I simplified the project by just leaving a simple component, it’s the Effect from jqueryUI. I got it to compile in java and it seems successful. The output is the following:

2022-10-19 18:11:28,246 INFO [ForkJoinPool.commonPool-worker-19] c.v.f.s.frontend.TaskUpdatePackages - Frontend dependencies resolved successfully.
2022-10-19 18:11:29,323 INFO [ForkJoinPool.commonPool-worker-19] c.v.f.s.f.TaskCopyFrontendFiles - Copying frontend resources from jar files …
2022-10-19 18:11:29,532 INFO [ForkJoinPool.commonPool-worker-19] c.v.f.s.f.TaskCopyFrontendFiles - Visited 30 resources. Took 208 ms.
2022-10-19 18:11:29,677 INFO [ForkJoinPool.commonPool-worker-19] c.v.b.d.AbstractDevServerRunner - Starting Vite
e[38;5;35m
------------------ Starting Frontend compilation. ------------------
e[0m2022-10-19 18:11:30,451 INFO [ForkJoinPool.commonPool-worker-19] c.v.b.d.AbstractDevServerRunner - Running Vite to compile frontend resources. This may take a moment, please stand by…
2022-10-19 18:11:31,474 INFO [dev-server-output] c.v.b.d.DevServerOutputTracker - Searching themes folder ‘C:\workspace\appflow\frontend\themes’ for theme ‘appflow’
2022-10-19 18:11:31,474 INFO [dev-server-output] c.v.b.d.DevServerOutputTracker - no assets to handle no static assets were copied
2022-10-19 18:11:31,505 INFO [dev-server-output] c.v.b.d.DevServerOutputTracker - Found theme files from ‘C:\workspace\appflow\frontend\themes’
2022-10-19 18:11:32,186 INFO [dev-server-output] c.v.b.d.DevServerOutputTracker -
2022-10-19 18:11:32,186 INFO [dev-server-output] c.v.b.d.DevServerOutputTracker - vite v2.9.13 dev server running at:
2022-10-19 18:11:32,186 INFO [dev-server-output] c.v.b.d.DevServerOutputTracker -
2022-10-19 18:11:32,187 INFO [dev-server-output] c.v.b.d.DevServerOutputTracker - > Local: http://127.0.0.1:63391/appflow/VAADIN/
2022-10-19 18:11:32,187 INFO [dev-server-output] c.v.b.d.DevServerOutputTracker -
2022-10-19 18:11:32,187 INFO [dev-server-output] c.v.b.d.DevServerOutputTracker - ready in 1692ms.
e[38;5;35m
----------------- Frontend compiled successfully. -----------------

Then I get a loop in the browser displaying the following message

unknown.png

It seems like the JQuery module was not loaded

I am adding the corresponding annotations to the java class

unknown.png

This is how I am loading the files in js

unknown.png

All this worked with webpack