升级后vuetify@3.7.2的findComponentParent错误致应用无法加载

问题描述 #

升级项目后，Vuetify@3.7.2抛出错误导致应用完全无法加载，单独回退Vuetify版本无法解决问题，涉及关联依赖包括vite-plugin-vuetify@2.0.4。

报错信息（中文翻译） #

Uncaught (in promise) Error: 找不到原始vnode
    at findComponentParent (directiveComponent.mjs?v=8cc27c4b:60:11)
    at directiveComponent.mjs?v=8cc27c4b:26:58
    at callWithErrorHandling (chunk-2F7H6EIX.js?v=8cc27c4b:2532:19)
    at callWithAsyncErrorHandling (chunk-2F7H6EIX.js?v=8cc27c4b:2539:17)
    at invokeDirectiveHook (chunk-2F7H6EIX.js?v=8cc27c4b:3049:7)
    at chunk-2F7H6EIX.js?v=8cc27c4b:6157:17
    at flushPostFlushCbs (chunk-2F7H6EIX.js?v=8cc27c4b:2710:28)
    at flushJobs (chunk-2F7H6EIX.js?v=8cc27c4b:2753:5)

解决建议 #

• 同步调整依赖版本：单独回退Vuetify无效，说明是vite-plugin-vuetify和Vuetify版本不匹配。如果回退Vuetify到3.6.x系列，需将vite-plugin-vuetify降级到1.0.x；若保留Vuetify 3.7.x，尝试升级vite-plugin-vuetify到适配的最新版本。
• 排查自定义指令/组件：错误来自directiveComponent.mjs，重点检查项目中自定义指令的逻辑，尤其是涉及vnode父节点查找的代码，是否在异步场景下访问了已销毁的vnode。
• 清理缓存重新构建：删除node_modules、.vite、dist文件夹，执行依赖重装命令（如npm install或pnpm install）后重新构建项目，清除Vite缓存导致的版本残留问题。
• 检查异步组件加载：若项目使用异步加载的Vuetify组件，确认是否在组件未完全加载时触发了指令逻辑，导致找不到对应vnode。

内容的提问来源于stack exchange，提问作者Théo Lavaux