Migrating from 14 to 24 (Webpack vs Vite build)

Flow
1

Im migrating our app from Vaadin 14 to 24. Ive done all the neccesary changes in java, maven dependencies, tests etc.
In our app we used webpack 4 in the build-frontend goal of vaadin-maven-plugin. Now it seems it is using Vite.

Is it possible to go back to webpack? We had our webpack.config.js heavily customized.
If not, then is there any guide on how to prepare vite.config for Vaadin 24 flow app?

2

There is no webpack support in Vaadin 24, it always uses Vite.

How you should go ahead and migrate the customizations really depends on what you have configured. A guess would be that not much of it is related to Vaadin so you can look for any existing guide about moving from webpack to Vite.

Vite also has a lot more features built in and enabled by default so you might also be able to just drop some custom configuration

3

Thanks for the info, will migrate to Vite then

4

Webpack is no longer supported in Vaadin 24, the last version that is using webpack is Vaadin 23

5

why not try a Java wrapped version of esbuild and remove the node dependency like Quarkus Web Bundler? Quarkus Web Bundler - Getting Started :: Quarkiverse Documentation

1 Like
6

Thanks for the insight. This definitely deserves an investigation on our side. Just very first thought: Vaadin uses Node.js to install frontend (npm) packages, not sure how we can get rid of it even if we use this Java wrapper for bundling. Installation and bundling are separate step in the project’s build. For Vaadin users it shouldn’t give much impact what Vaadin uses under the hood for bundling. What matters is performance, compatibility and sometimes an opportunity for extension (adding Vite/Webpack plugins for instance).

Note that Vaadin doesn’t support webjars in Vaadin Flow, so that may be a limitation for using this wrapper. But anyway, worth to take a look, thanks!