2

我们正在使用 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 版本中实现这种行为吗？

4

1 回答 1

3

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

Vaadin 20.xx 需要与您的插件不兼容的 vaadin-button 版本 20.xx。

最简单的解决方案是将插件中的 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 中注册两次相同的组件。

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

于 2021-08-17T16:23:10.393 回答