Vue+Quasar JSX项目中q-btn组件无法解析的问题求助

• 报错信息：Failed to resolve component: q-btn
• 报错截图：
• 已知情况：JSX功能正常（可渲染普通HTML元素），Quasar组件在.vue文件中能正常使用，在线示例可运行但本地无法复现

相关代码文件 #

Tmp1Component.tsx #

import { h, defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  setup () {
    const x = "test"
  },
  render() {
    return [<q-btn>Test</q-btn>,<div>Tes2</div>]
}
})

Tmp1Page.vue #

<template>
  <tmp1-component />
  <tmp2-component />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Tmp1Component from '../components/Tmp1Component.tsx'
import Tmp2Component from '../components/Tmp2Component.vue'


export default defineComponent({
   name: 'Tmp1Page',
   inheritAttrs: false,
   components: { Tmp1Component, Tmp2Component },
   setup () {
     {}
  }
});
</script>

babel.config.js #

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
//    '@quasar/babel-preset-app'
  ],
  plugins: ["@vue/babel-plugin-jsx", "transform-vue-jsx"]
}

package.json #

{
  "name": "kitty",
  "version": "0.0.1",
  "private": true,
  "description": "Kitty desc",
  "author": "amirny2205 <*.ru>",
  "scripts": {
    "lint": "eslint --ext .js,.ts,.vue ./",
    "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/babel-plugin-jsx": "^1.1.1",
    "@vue/cli-plugin-babel": "^5.0.8",
    "axios": "^0.21.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "core-js": "^3.8.3",
    "jquery": "^3.6.3",
    "pinia": "^2.0.11",
    "quasar": "^2.6.0",
    "vue": "^3.0.0",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.0.0"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
    "@quasar/app-vite": "^1.0.0",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^9.0.0",
    "prettier": "^2.5.1",
    "typescript": "^4.5.4",
    "vite": "^3"
  },
  "engines": {
    "node": "^18 || ^16 || ^14.19",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  },
  "productName": "Kitty"
}

求解决该问题，让TSX组件能正常识别并渲染Quasar的q-btn组件。

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