We are using Vaadin Fusion, and are stuck for the time being with version 19. In this version it is not possible to add an NPM dependency that itself depends on Vaadin components.
E.g. if I have an app's package.json like this:
{
"dependencies": {
"my-beautiful-button": "0.0.1",
"@polymer/iron-icon": "3.0.1",
"@polymer/iron-list": "3.1.0",
"@polymer/polymer": "3.2.0",
"@vaadin/flow-frontend": "./target/flow-frontend",
"@vaadin/form": "./target/flow-frontend/form",
"@vaadin/router": "1.7.2",
...
and my-beautiful-button has a package.json like this
{
"dependencies": {
"vaadin/vaadin-button": "2.4.0",
...
the app will compile fine and start with Spring-boot and webpack-dev-server, but in the browser console an exception somewhat like this will be thrown:
Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-lumo-styles" has already been used with this registry
This is reproducible with apps based on Vaadin up to version 20.0.5. Now with Vaadin 20.0.6 this is fixed and "my-beautiful-button" shows up fine in the browser. But for the life of me I can't seem to find out what caused the change in the Vaadin code base.
Is there something I can do to have this behavior in Vaadin versions prior to 20.0.6?
Vaadin 19 requires vaadin-button version 2.4.0. Your addon requires the same version so there is no conflict and only one version will be used.
Vaadin 20.x.x requires vaadin-button version 20.x.x. which is not compatible with your addon.
The easiest solution is to bump the version of the vaadin-button in your addon to 20:
or
If you keep it this way, npm or pnpm will try to resolve the conflict by choosing the "right" version for you or use both versions. But you can't register two times the same component in the CustomRegistry.
The versioning of the webcomponents changed from Vaadin 20 and now follow the platform version. For your add-on, it's easier to bump the version to the correct version of the platform but it's also, in my opinion, a required step for every major version (20, 21,...).