Vaadin 19：使用具有自己的 Vaadin 依赖项的 NPM 模块失败

Question

我们正在使用 Vaadin Fusion，目前卡在版本 19 中。在此版本中，无法添加本身依赖于 Vaadin 组件的 NPM 依赖项。

例如如果我有这样的应用 package.json：

{
  "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",
    ...

和my-beautiful-button有一个package.json像这样

{
  "dependencies": {
    "vaadin/vaadin-button": "2.4.0",
    ...

该应用程序可以正常编译并以 Spring-boot 和 webpack-dev-server 启动，但在浏览器控制台中会抛出类似这样的异常：

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

这可以通过基于 Vaadin 的应用程序重现，最高版本为 20.0.5。现在 在 Vaadin 20.0.6 中，此问题已修复，并且“my-beautiful-button”在浏览器中显示正常。但是对于我来说，我似乎无法找出导致 Vaadin 代码库发生变化的原因。

在 20.0.6 之前的 Vaadin 版本中，我可以做些什么来实现这种行为？

Answer 1

Vaadin 19 需要 vaadin-button 版本 2.4.0。您的插件需要相同的版本，因此不会发生冲突，只会使用一个版本。

Vaadin 20.x.x 需要 vaadin 按钮版本 20.x.x。这与您的插件不兼容。

最简单的解决方案是将插件中的 vaadin-button 版本提高到 20：

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

或

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

~20.0.0 将使用从 20.0.0 到 <20.1.0 的版本。
^20.0.0 将使用从 20.0.0 到 <21.0.0 的版本。

如果您保持这种方式，npm 或 pnpm 将尝试通过为您选择“正确”版本或同时使用这两个版本来解决冲突。但是你不能在CustomRegistry中注册两次相同的组件。

webcomponents 的版本从 Vaadin 20 更改为现在遵循平台版本。对于您的附加组件，将版本升级到平台的正确版本会更容易，但在我看来，这也是每个主要版本（20、21 等）的必需步骤。

Vaadin 19：使用具有自己的 Vaadin 依赖项的 NPM 模块失败

Vaadin 19: Using NPM modules with own Vaadin dependencies fails

npm

vaadin

vaadin20

vaadin-fusion

hilla