TS2724: '"vue"' has no exported member named 'JSXComponent'. Did you mean 'Component'?

Question

I'm trying to get a Vue 3 + Vuetify project going and I'm hitting this error when I run yarn build:

>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, Co
mponentPublicInstance, 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

Here's my 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"
  }
}

Answer 1

JSXComponent type is no longer exported from Vue, so Vuetify defines it internally: https://github.com/vuetifyjs/vuetify/commit/7c8aeefdc097ff9b74a733ed17b6a8cd9e1f8575 You should update to Vuetify v3.7.1 or newer