从Vaadin 22升级到24后部分内置组件无法渲染求助

核心问题分析 #

报错明确说明生产构建时未将组件对应的前端JS文件纳入打包，这是Vaadin 24基于Vite的前端打包机制与旧版本的差异导致的——Vaadin 24通过静态代码扫描自动收集需打包的组件，但如果组件通过反射、动态创建或在未被扫描到的场景下使用，就会出现漏打包情况。

具体解决步骤 #

1. 用@Uses注解强制声明组件依赖 #

在使用组件的视图类、布局类或全局配置类上添加@Uses注解，明确告知Vaadin需打包对应组件的前端资源：

import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.details.Details;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.router.Route;

@Route("your-view")
@Uses(ComboBox.class)
@Uses(Details.class)
@Uses(Grid.class)
public class YourView extends VerticalLayout {
    // 组件业务逻辑
}

若为全局通用组件，可在Spring Boot主启动类或全局配置类上添加注解，无需每个视图重复声明。

2. 处理动态/反射创建组件的场景 #

如果组件通过反射（如Class.forName）或动态方式创建，Vaadin静态扫描无法识别，除了添加@Uses，还可在被扫描到的类中添加静态引用触发打包：

// 仅用于触发组件资源打包，无实际业务用途
private static final Class<?> FORCE_INCLUDE_COMBOBOX = ComboBox.class;
private static final Class<?> FORCE_INCLUDE_GRID = Grid.class;

3. 完整清理并重新执行生产构建 #

不要仅删除node_modules和frontend目录，需执行完整清理流程：

• 停止应用服务
• 删除target目录（Spring Boot构建输出目录）
• 删除node_modules、.vaadin和frontend/generated目录
• 重新执行生产构建命令：
  Maven：

  ./mvnw clean package -Pproduction
  

  Gradle：

  ./gradlew clean build -Pvaadin.productionMode
  

4. 检查Vaadin依赖配置 #

确保pom.xml（或build.gradle）引入完整的Vaadin Starter依赖，避免手动拆分依赖导致资源绑定缺失：

<!-- Maven依赖示例 -->
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-spring-boot-starter</artifactId>
    <version>24.1.1</version>
</dependency>

5. 检查自定义Vite配置 #

若修改过vite.config.ts，确保未添加排除Vaadin内置组件的规则，比如不要在rollupOptions中排除@vaadin/*相关包。

验证解决效果 #

启动生产模式应用后，查看页面源码，<vaadin-combo-box>等标签应包含对应class属性与初始化脚本，日志中不再出现原错误信息。

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