Vaadin 14迁移至24后启动失败：Vite构建找不到lit-html的class-map

开发者阿泽

2026-7-7

Vaadin 24迁移后Vite构建报错：lit-html缺少"./directives/class-map"的排查方案

检查lit-html版本兼容性
Vaadin 24对lit-html的版本有严格依赖，先执行npm list lit-html查看当前项目的lit-html版本，再对照Vaadin 24官方指定的依赖版本（通常为^2.8.0左右）。如果版本不匹配，删除node_modules和package-lock.json文件，重新执行npm install拉取适配的版本。
验证lit-html的导出配置
打开node_modules/lit-html/package.json，查看exports字段是否正确声明了./directives/class-map的导出路径，正常配置应该类似：
```
"./directives/class-map": {
  "types": "./directives/class-map.d.ts",
  "default": "./directives/class-map.js"
}
```
如果没有该配置，说明当前lit-html版本不符合Vaadin 24要求，按第一步方法更换版本。
清理Vite缓存
Vite的缓存可能残留旧的模块解析记录，执行npx vite --clear-cache清空缓存后，重启Tomcat重新触发构建。
修正自定义导入路径
旧Vaadin 14项目可能存在直接导入lit-html指令的代码，比如import { classMap } from 'lit-html/directives/class-map';。在Vaadin 24对应的lit-html版本中，正确导入路径可能已调整为import { classMap } from '@lit/reactive-element/css-map';，检查项目中的相关导入语句并修正。
排除Tomcat环境干扰
尝试用Vaadin开发模式（mvn vaadin:run）启动项目，看是否仍出现相同报错。如果本地开发模式正常，说明问题出在Tomcat的资源加载配置上，检查Tomcat是否有拦截node_modules下.js文件的安全规则，调整配置后重试。