vue quasar JSX Failed to resolve component - vue.js

Question

I have the following code:
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"
}
And I am getting "Failed to resolve component: q-btn"
screenshot
JSX works as you can see by the "test" string
Quasar components work as you can see by "BUTN"
I have found this: https://github.com/quasarframework/quasar/issues/7672
( https://codesandbox.io/s/magical-dew-mybq9?file=/package.json )
and this:
https://codesandbox.io/s/53ki6?file=/src/App.tsx
Both work in the sandbox though I cannot get them to work locally

Answer 1

The solution was to import the component in quasar.config.js