切换Vaadin Material Theme后应用无法加载的问题求助

通过start.spring.io创建Spring+Vaadin项目，依赖为：

implementation("com.vaadin:vaadin-spring-boot-starter")

项目原本可正常运行，切换至Material主题后，应用无法加载，控制台报错：

(index):6 Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-material-styles" has already been used with this registry
    at window.customElements.define (http://localhost:8080/:6:829)
    at http://localhost:8080/VAADIN/@fs/Users/.../node_modules/@vaadin/vaadin-material-styles/version.js?v=8ff276da:19:16

重新用Vaadin Starter生成项目仍出现相同错误。

该错误源于vaadin-material-styles自定义元素被重复注册，通常和依赖冲突、缓存或重复配置有关，可按以下步骤解决：

• 清理前端依赖缓存

  1. 删除项目根目录下的node_modules文件夹
  2. 删除package-lock.json（或yarn.lock）文件
  3. 执行npm install（或yarn install）重新安装前端依赖

• 确保主题配置唯一

  1. 打开src/main/resources/META-INF/vaadin/config/vaadin-config.json，确认仅配置Material主题：

     {
       "theme": "material"
     }
     

  2. 检查application.properties（或application.yml），确保只有一行主题配置：

     vaadin.theme=material
     

• 排除冲突依赖
  若项目同时引入Lumo和Material主题依赖会导致冲突，需排除Lumo相关依赖：

  • Gradle配置：

    implementation("com.vaadin:vaadin-spring-boot-starter") {
        exclude group: 'com.vaadin', module: 'vaadin-lumo-theme'
    }
    implementation("com.vaadin:vaadin-material-theme")
    

  • Maven配置：

    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-spring-boot-starter</artifactId>
        <exclusions>
            <exclusion>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-lumo-theme</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-material-theme</artifactId>
    </dependency>
    

• 清理Vaadin缓存

  1. 删除项目根目录下的.vaadin文件夹
  2. 重启Spring Boot应用，让Vaadin重新生成前端资源

• 检查自定义主题文件
  若有自定义样式文件（如styles.css），确保没有重复导入vaadin-material-styles相关模块，避免重复注册。

内容的提问来源于stack exchange，提问作者Jakub Prądzyński