Vaadin 24 Upgrade Problems

Flow
1

I was exited to see the release of Vaadin 24 and followed the upgrade guide here: https://vaadin.com/docs/latest/upgrading

As usual with updates I deleted node_modules and package json files and similar automatically generated things.
Then I ran mvn clean install
After following the steps my maven project compiled successfully and also started successfully.

However it seems like Vite is not started as I cannot spot in the logs when starting in debug mode locally as usual. Also no new package json, vite config and similar files are generated.
Opening the website shows me a white screen.

Any idea which thing I might have missed?

Vaadin Development tool is showing the following error:

NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-checkbox" has already been used with this registry
2

Hard to tell without more information like:

  • what was your previous used version
  • what add-ons are you using and are those compatible with v24
  • what did you also update like spring boot 2.x to 3.0.x
  • are you using material design?
3

The error message itself means that the JS for vaadin-checkbox is loaded and executed twice in the browser

4

Vite is not used by default so it should not start

5
  • Upgraded from latest 23.x version (working)
  • adddons:
    • com.vaadin.componentfactory.tooltip
    • com.vaadin.componentfactory.togglebutton
    • org.vaadin.textfieldformatter
    • com.github.appreciated.apexcharts
  • Yes updates to Srping Boot 3.0 and everything else described in docs
  • lumo + custom theme
6

If you set ´frontend.hotdeploy` then you go back to using Vite: https://vaadin.com/docs/latest/configuration/development-mode/#front-end-development-server-for-easier-debugging

7

You can try removing src/main/dev-bundle and it will re-generate it. That is the precompiled JS bundle Vaadin 24 uses

8

I’m wondering if it could be related to the togglebutton because it’s using vaadin-checkbox under the hood

9

https://github.com/vaadin-component-factory/vcf-toggle-button/blob/master/src/vcf-toggle-button.js

10

Looks like it’s importing the old vaadin-checkbox import

11

Thanks @winsome-wombat was not aware of this change. Good to know!

12

@quirky-zebra thanks this was actually the problem. But I also had to re-delete dev-bundle for it to work.

13

Good, I was scared for a minute something else was the culprit :sweat_smile:

14

Unfortunately always problems with Addons when updating Vaadin Verisons :/ will try to remove as many as possible.

15

Addons most often need to be updated also, and that takes some time

16

For the toggle button, you can use a vaadin-checkbox with a theme: Remove the vcf-toggle-button usage · Issue #12 · vaadin-component-factory/toggle-button · GitHub
You might need to change your code a bit.

17

@winsome-wombat
I am still facing a major issue with theming.
It seems like the styles.css from my parent theme is not picket up.

Only when I enable vite via frontend.hotdeploy are the styles correctly applied. When its turned off the styles are not applied.

18

It does load themes differently when not using Vite so maybe there is still a bug somebody left there to be discovered

19

Are the styles not picked up or is something else overriding your styles?

20

I checked all styles from common styles.css are not showing up at all.
However styles from common components folder are applied correctly.
(styles from theme1 folder styles.css are applied)

Theme folders:

themes
  common
    components
    styles.css
  theme1
    styles.css
    theme.json --> pointing to common