Vaadin 14组件HTML存在但尺寸0x0不可见如何解决

故障核心原因是Web Components组件未完成客户端注册，所以只有自定义标签的DOM结构，没有对应的shadow root、样式和交互逻辑，属于Vaadin14 npm模式下常见的前端依赖/打包配置问题，可按以下步骤排查解决：

• 统一依赖版本，排除冲突
  首先在项目pom.xml的<dependencyManagement>节点引入Vaadin官方BOM进行全栈版本统一管控，所有vaadin相关依赖无需单独指定版本，避免第三方插件引入的传递依赖导致组件版本不一致：

  <dependencyManagement>
    <dependencies>
      <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-bom</artifactId>
        <version>你的Vaadin14具体版本号，如14.10.10</version>
        <type>pom</type>
        <scope>import</scope>
      </dependency>
    </dependencies>
  </dependencyManagement>
  

  执行mvn dependency:tree检查所有vaadin相关组件版本是否一致，彻底移除第三方slider插件残留的依赖，排除所有和Vaadin官方组件版本不一致的传递依赖。
• 彻底清理全链路缓存
  除已删除的本地项目文件，还需要删除以下全局缓存目录后重新构建：
  • Maven本地仓库中com/vaadin路径下的所有缓存文件
  • 当前用户根目录下的.vaadin全局缓存文件夹
  • 当前用户根目录下.npm、.yarn相关缓存目录
    清理完成后依次执行以下命令重建前端资源：

  mvn vaadin:clean-frontend
  mvn vaadin:prepare-frontend
  mvn compile
  

• 校验自定义webpack配置
  如果项目存在自定义的webpack.config.js，检查是否修改了默认的module编译规则、entry入口配置，确保没有排除node_modules/@vaadin目录下的组件编译逻辑，Vaadin默认的webpack配置会自动扫描并注册用到的组件，自定义配置的错误修改会导致组件注册逻辑失效。
• 强制导入组件脚本
  在出现异常的视图类上添加@JsImport注解强制导入对应组件的前端脚本，绕过自动扫描可能出现的导入遗漏：

  @JsImport("@vaadin/vaadin-text-field/vaadin-integer-field.js")
  @JsImport("@vaadin/vaadin-text-field/vaadin-number-field.js")
  @JsImport("@vaadin/vaadin-date-picker/vaadin-date-picker.js")
  public class YourView extends VerticalLayout {
    // 视图业务逻辑
  }
  

• 禁用浏览器缓存
  开发调试时打开浏览器控制台的「网络」面板，勾选「禁用缓存」选项后强制刷新页面，避免浏览器缓存旧的打包资源导致偶发的异常复现。

内容的提问来源于stack exchange，提问作者Szymon Szpakowski