Vaadin 24.6生产环境DropTarget失效问题求助

问题概述 #

升级Vaadin到24.6版本后，开发环境（Eclipse+Wildfly）中Drag and Drop功能正常，但构建生产模式的.war包部署到Wildfly后，DropTarget无法被识别为可放置目标。24.6版本之前无此问题。

复现代码 #

代码逻辑与Vaadin官方示例一致：

public TestDropComponent() {
    VerticalLayout dropLayout = new VerticalLayout();
    DropTarget<VerticalLayout> dropTarget = DropTarget.create(dropLayout);
    
    dropTarget.setDropEffect(DropEffect.MOVE);
    dropTarget.addDropListener(e -> System.out.println("Element dropped"));
    dropTarget.setActive(true);

    this.add(dropLayout);
    
    Div box1 = new Div();
    DragSource<Div> box1DragSource = DragSource.create(box1);
    add(box1);
}

浏览器控制台错误 #

VM1176:3 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'updateDragSource')
at HorizontalLayout.eval (eval at EE (FlowClient-CjLkgOY_.js:3:44102), <anonymous>:3:60)
...
VM1199:3 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'updateDropTarget')
...

HTML差异对比 #

工作版本（开发环境）的HTML包含明确的组件标记与属性：

align-items: center; min-width: 50%;"><vaadin-horizontal-layout
id="Target Id: 0/1" class="" style="width: 100%; border-color: rgb(16,
110, 190); border-width: 1px; margin-bottom: 10px; border-style:
dashed; height: 100%;"><vaadin-horizontal-layout
id="source"
draggable="true" style="width: 100%; height:
100%;">

生产环境的对应元素缺失上述关键标记与属性。

可能成因分析 #

1. 生产构建资源优化遗漏：Vaadin 24.6调整了生产构建的Tree Shaking或资源打包策略，导致Drag&Drop相关的客户端JS模块（包含updateDragSource/updateDropTarget方法）被误删，无法正常初始化拖拽逻辑。
2. Wildfly缓存残留：生产部署时Wildfly未清理旧版本的Vaadin客户端资源，缓存的旧资源与24.6版本的新逻辑不兼容。
3. 组件初始化时序问题：新版本对DragSource/DropTarget的绑定时机有更高要求，开发环境的组件渲染时序宽松，而生产环境中组件未完全挂载到DOM就执行了拖拽绑定，导致JS无法找到目标元素。
4. 客户端ID生成异常：生产环境中组件的客户端ID未正确生成或关联，导致JS无法定位到DropTarget元素进行绑定。

排查建议 #

• 检查vaadin-maven-plugin生产构建配置，确保未排除Drag&Drop相关依赖模块，必要时显式声明依赖。
• 清理Wildfly的standalone/data、standalone/tmp目录，删除缓存后重新部署war包。
• 将DragSource/DropTarget的初始化逻辑移至onAttach方法，确保组件挂载到DOM后再执行绑定：

@Override
protected void onAttach(AttachEvent attachEvent) {
    super.onAttach(attachEvent);
    VerticalLayout dropLayout = new VerticalLayout();
    DropTarget<VerticalLayout> dropTarget = DropTarget.create(dropLayout);
    dropTarget.setDropEffect(DropEffect.MOVE);
    dropTarget.addDropListener(e -> System.out.println("Element dropped"));
    dropTarget.setActive(true);
    this.add(dropLayout);

    Div box1 = new Div();
    DragSource<Div> box1DragSource = DragSource.create(box1);
    add(box1);
}

• 启用Vaadin生产模式调试日志，检查客户端资源加载情况，确认拖拽相关JS文件是否正常加载。
• 对比生产环境页面HTML，确认目标元素是否包含draggable="true"属性及正确的Vaadin组件标记。

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