2

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?

ollitietavainen
  • 3,900
  • 13
  • 30
ThomasH
  • 22,276
  • 13
  • 61
  • 62
  • Check out https://stackoverflow.com/questions/68681211/vaadin-production-mode-builds-broken-in-v20/ in case this is related to the recent webpack update (workaround for earlier Vaadin versions in the comments). – Anna Koskinen Aug 17 '21 at 15:42
  • @AnnaKoskinen Thanks for the heads-up, but I was aware of the workbox issue, and had already applied the work-around, even before adding my custom module. – ThomasH Aug 18 '21 at 10:22

1 Answers1

3

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:

"vaadin/vaadin-button": "ˆ20.0.0",

or

"vaadin/vaadin-button": "˜20.0.0",
  • ~20.0.0 will use releases from 20.0.0 to <20.1.0.
  • ^20.0.0 will use releases from 20.0.0 to <21.0.0.

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,...).

Jean-Christophe Gueriaud
  • 1,328
  • 3
  • 8
  • Thanks, that fixed it, and the reasoning makes sense. I actually tried a 20.x dependency in my addon before, but always as a fixed version like "20.0.2". Just prefixing a tilde fixed it. - Still curious why it self-healed when upgrading the app from 20.0.5 to 20.06. Testing with the addon with fixed dependency of "20.0.2" for the vaadin-button, and looking at the node_modules/my-beautiful-button folder, it has an own `node_modules` subfolder in the Vaadin 20.0.5 app (containing vaadin-lumo-styles 20.0.2, where Vaadin comes with lumo-styles 20.0.1), but no such folder at all in the 20.0.6 app!? – ThomasH Aug 18 '21 at 11:01
  • Ah, I guess I'm getting at it. NPM/PNPM try to unify the different version requirements for any particular dependency, to come up with a single requirement that suits all. Requiring the same fix version is an easy MGU, as is the case with the Vaadin 20.0.6 app and the addon (both requiring a vaadin-button 20.0.2). In other cases, wildcards are needed to find a common version. – ThomasH Aug 18 '21 at 12:32