如何在Gradle项目中添加@vaadin/vaadin-element-mixin依赖？

问题场景 #

自定义Web组件SelectionGrid时使用以下代码：

import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
import { ElementMixin } from '@vaadin/vaadin-element-mixin';
import { GridElement } from  '@vaadin/vaadin-grid/src/vaadin-grid.js';

import {
_getItemOverriden,
_selectionGridSelectRow,
_selectionGridSelectRowWithItem
} from './helpers';

class VcfSelectionGridElement extends ElementMixin(ThemableMixin(GridElement)) {

    constructor() {

....

构建错误信息 #

执行vaadinBuildFrontend任务时失败，错误输出：

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':vaadinBuildFrontend'.
> Vite process exited with non-zero exit code.
  Stderr: 'vite v3.2.5 building for production...
  transforming...
  ✓ 112 modules transformed.
  [vite]: Rollup failed to resolve import "@vaadin/vaadin-element-mixin" from "frontend/src/vcf-sel-table.js".
  This is most likely unintended because it can break your application at runtime.
  If you do want to externalize this module explicitly add it to
  `build.rollupOptions.external`
  error during build:
  Error: [vite]: Rollup failed to resolve import "@vaadin/vaadin-element-mixin" from "frontend/src/vcf-sel-table.js".
  This is most likely unintended because it can break your application at runtime.
  If you do want to externalize this module explicitly add it to
  `build.rollupOptions.external`
      at onRollupWarning ()
      at onwarn ()
      at Object.onwarn ()
      at ModuleLoader.handleResolveId ()
      at 

已尝试的无效操作 #

• 发现@vaadin/vaadin-themable-mixin已由vaadinPrepareFrontend自动添加到生成的package.json，但@vaadin/vaadin-element-mixin缺失，且不清楚如何手动添加（因为package.json是自动生成的）
• 尝试在Gradle依赖中添加WebJar：

dependencies {
    implementation("org.webjars.bowergithub.vaadin:vaadin-element-mixin:2.4.2")
}

此方法无效，同时希望了解Vaadin的TypeScript代码解析逻辑（推测Web组件的TS代码打包在Jar文件中）。

解决思路 #

1. 修正导入路径（针对Vaadin 23+版本） #

Vaadin 23及以上版本中，ElementMixin已整合到@vaadin/component-base包中，不再作为独立的vaadin-element-mixin包存在。直接修改导入语句：

import { ElementMixin } from '@vaadin/component-base';

这是解决依赖找不到的核心方案。

2. 让Vaadin自动管理前端依赖 #

Vaadin的vaadinPrepareFrontend任务会根据Java端依赖和前端代码的导入自动生成package.json，无需手动修改前端配置或添加WebJar。

• 若使用Vaadin 22及以下版本，需在Gradle中添加对应的Java依赖：

implementation 'com.vaadin:vaadin-element-mixin:2.4.2'

添加后重新执行vaadinPrepareFrontend，任务会自动将对应的npm依赖写入package.json。

3. Vaadin TypeScript代码解析逻辑说明 #

Vaadin的Web组件（含TypeScript代码）确实打包在Java Jar包中。执行vaadinPrepareFrontend时，任务会将Jar内的前端资源提取到项目node_modules目录，同时生成package.json、vite.config.js等配置，让Vite能正确解析导入路径。所有前端依赖的管理都应通过Java端的Gradle/Maven依赖触发，而非手动修改前端文件。

4. 排查依赖冲突 #

若版本对应仍报错，可执行以下步骤：

• 清理项目的node_modules目录和package-lock.json/yarn.lock文件
• 重新执行vaadinPrepareFrontend和vaadinBuildFrontend任务
• 检查Gradle依赖树，确认是否存在Vaadin组件版本冲突

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