Vue3+Vite+ElementPlus项目JSX中el-button类型报错求助

使用Vue3+Vite+TypeScript+ElementPlus搭建项目，采用JSX开发时编写如下代码，VS Code提示错误 "Property 'el-button' does not exist on type 'JSX.IntrinsicElements'"，但页面可正常运行，怀疑是缺少类型文件或工具版本升级导致该问题。

相关JSX代码 #

import { defineComponent, ref } from 'vue'
const Login = defineComponent({
    setup() {
        const count = ref(0)

        return () => (
            <div>
                <h1 onClick={() => count.value++}>{count.value}</h1>
                <el-button>hello</el-button>
            </div>
        )
    }
})

export default Login

package.json 配置 #

{
  "name": "dzmc-back",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "prepare": "husky"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@types/react": "^18.2.57",
    "@vitejs/plugin-vue-jsx": "^3.1.0",
    "element-plus": "^2.5.5",
    "pinia": "^2.1.7",
    "vue": "^3.3.11",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@commitlint/cli": "^18.6.1",
    "@commitlint/config-conventional": "^18.6.2",
    "@types/node": "^20.11.16",
    "@vitejs/plugin-vue": "^4.5.2",
    "@vue/babel-plugin-jsx": "^1.2.1",
    "husky": "^9.0.11",
    "install": "^0.13.0",
    "sass": "^1.70.0",
    "typescript": "^5.2.2",
    "unplugin-auto-import": "^0.17.5",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.0.8",
    "vue-tsc": "^1.8.25"
  }
}

tsconfig.json 配置 #

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": {
      //路径映射，相对于baseUrl
      "@/*": ["src/*"]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.ts 配置 #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'

export default defineConfig({
  plugins: [vue(),
  AutoImport({
    resolvers: [ElementPlusResolver()],
  }),
  Components({
    resolvers: [ElementPlusResolver()],
  }),
  vueJsx({
    transformOn: true,
    mergeProps: true
  }),
  ],
  resolve: { alias: { '@': path.resolve('./src') } },
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
    modules: {
      localsConvention: 'camelCase'
    }
  },
})

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