Vaadin 24升级后vaadin-button重复注册DOMException问题求助

错误场景 #

将Vaadin应用从23.3版本升级到24版本，同时升级Spring到3.0.4后，本地运行时浏览器抛出以下错误：

Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-button" has already been used with this registry

错误指向自动生成的dev-bundle目录下generated-flow-imports-4b2e9ecd.js文件中的customElements.define(Button.is, Button)代码行，相关代码片段：

class Button extends ButtonMixin(ElementMixin$1(ThemableMixin(ControllerMixin(PolymerElement)))) {
static get is() {
    return "vaadin-button"
}
static get template() {
    return buttonTemplate(html$1)
}
ready() {
    super.ready(),
    this._tooltipController = new TooltipController(this),
    this.addController(this._tooltipController)
}
}

customElements.define(Button.is, Button);

错误原因 #

1. Dev-bundle缓存污染：升级后旧的开发缓存未清理，新旧组件定义文件混合加载，导致重复注册。
2. 依赖冲突：项目中残留Vaadin 23.x的Polymer相关依赖，与Vaadin 24默认的Lit组件依赖冲突，触发重复注册。
3. 组件模式不兼容：Vaadin 24默认使用Lit组件，若项目仍保留Polymer风格组件或未正确切换模式，会导致同一组件被多次定义。

可行解决方案 #

• 清理开发缓存
  删除项目根目录下的.vaadin文件夹，以及frontend/generated目录，然后重新启动应用，让Vaadin重新生成干净的dev-bundle文件。

• 统一并清理依赖
  检查pom.xml，确保所有Vaadin依赖版本统一为24.x，移除Vaadin 23.x特有的依赖（如vaadin-polymer-client，若需保留Polymer组件则需添加匹配24.x版本的vaadin-polymer-legacy-adapter）。使用Spring Boot 3.x兼容的Vaadin Starter：

  <dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>vaadin-spring-boot-starter</artifactId>
      <version>24.3.0</version> <!-- 选择兼容Spring 3.0.4的Vaadin 24版本 -->
  </dependency>
  

  执行mvn dependency:tree检查依赖树，排除任何旧版本的Vaadin或Polymer相关依赖。

• 配置正确的组件特性
  编辑frontend/config/vaadin-featureflags.json，禁用Polymer相关的旧特性，确保启用Lit组件模式：

  {
    "enableDeprecatedVaadinPolymerTemplate": false,
    "useDeprecatedV14Bootstrap": false
  }
  

• 迁移Polymer组件到Lit（可选）
  若项目中有自定义Polymer组件，建议迁移到Vaadin 24默认的Lit组件格式，避免与新组件体系冲突。

内容的提问来源于stack exchange，提问作者Tom Milton