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
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?
The error message itself means that the JS for vaadin-checkbox
is loaded and executed twice in the browser
Vite is not used by default so it should not start
You can try removing src/main/dev-bundle
and it will re-generate it. That is the precompiled JS bundle Vaadin 24 uses
I’m wondering if it could be related to the togglebutton because it’s using vaadin-checkbox under the hood
Looks like it’s importing the old vaadin-checkbox import
Thanks @winsome-wombat was not aware of this change. Good to know!
@quirky-zebra thanks this was actually the problem. But I also had to re-delete dev-bundle for it to work.
Good, I was scared for a minute something else was the culprit ![:sweat_smile: :sweat_smile:](/forum/images/emoji/twitter/sweat_smile.png?v=12)
Unfortunately always problems with Addons when updating Vaadin Verisons :/ will try to remove as many as possible.
Addons most often need to be updated also, and that takes some time
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.
@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.
It does load themes differently when not using Vite so maybe there is still a bug somebody left there to be discovered
Are the styles not picked up or is something else overriding your styles?
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