Vue3+Vuetify项目执行yarn build遇TS2724错误求助

执行yarn build命令时触发TS2724错误，具体错误信息：

>yarn build          
node_modules/vuetify/lib/components/index.d.mts:2:99 - error TS2724: '"vue"' has no exported member named 'JSXComponent'. Did you mean 'Component'?

2 import { Ref, DeepReadonly, ComponentPropsOptions, ExtractPropTypes, VNodeChild, VNode, PropType, JSXComponent, ComponentInternalInstance, ComputedRef, Component, EffectScope, nextTick, WritableComputedRef, CSSProperties, Prop, ComponentPublicInstance, InjectionKey, UnwrapRef } from 'vue';
                                                                                                    ~~~~~~~~~~~~

node_modules/vuetify/lib/index.d.mts:2:29 - error TS2724: '"vue"' has no exported member named 'JSXComponent'. Did you mean 'Component'?

2 import { Ref, DeepReadonly, JSXComponent, PropType, CSSProperties, App } from 'vue';
                              ~~~~~~~~~~~~

node_modules/vuetify/lib/labs/components.d.mts:2:69 - error TS2724: '"vue"' has no exported member named 'JSXComponent'. Did you mean 'Component'?

2 import { ComponentPropsOptions, ExtractPropTypes, Ref, EffectScope, JSXComponent, PropType, UnwrapRef, CSSProperties, nextTick, VNode } from 'vue';
                                                                      ~~~~~~~~~~~~


Found 3 errors in 3 files.

Errors  Files
     1  node_modules/vuetify/lib/components/index.d.mts:2
     1  node_modules/vuetify/lib/index.d.mts:2
     1  node_modules/vuetify/lib/labs/components.d.mts:2

项目package.json配置：

{
  "name": "frontend",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@mdi/font": "7.0.96",
    "core-js": "^3.29.0",
    "pinia": "^2.0.0",
    "roboto-fontface": "*",
    "vue": "^3.3.4",
    "vue-router": "^4.0.0",
    "vuetify": "^3.0.0",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@babel/types": "^7.21.4",
    "@types/node": "^18.15.0",
    "@types/webfontloader": "^1.6.35",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vue/eslint-config-typescript": "^11.0.0",
    "eslint": "^8.37.0",
    "eslint-plugin-vue": "^9.3.0",
    "sass": "^1.60.0",
    "typescript": "^5.0.0",
    "vite": "^4.3.8",
    "vite-plugin-vuetify": "^1.0.0",
    "vue-tsc": "^1.2.0"
  }
}

问题原因 #

Vuetify 3.0.x的类型定义文件中引用了Vue的JSXComponent类型，但该类型在Vue 3.3+版本中已被移除或重命名，同时当前Vuetify版本也未适配TypeScript 5.0，导致类型检查不通过。

解决步骤 #

• 修改package.json中的依赖版本：
  • 将vuetify的版本从^3.0.0更新为^3.3.0或更高稳定版
  • 将vite-plugin-vuetify的版本从^1.0.0更新为^1.0.2或更高
• 执行yarn install重新安装依赖
• 再次运行yarn build即可完成构建

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