我正在使用Nuxt，Nuxt Typescript，TSX和Vue Composition API。当我将一个.vue组件转换为一个.tsx组件，一种[[without渲染方法，但是从设置函数返回JSX时，在运行时出现以下错误：
无法读取未定义的属性'$ createElement']从上面列出的堆栈中，我不知道哪个部分可能导致此问题，所以我认为它与Composition API程序包有关。我也不太熟悉Composition API，并且尝试学习-可能是我在这里做错了吗？
我的组件看起来像这样：
import { createComponent, reactive } from '@vue/composition-api'
import InputField from '@/components/InputField.vue'
import PageSection from '@/components/PageSection.vue'
import countryData from '@/data/countries.json'
export default createComponent({
components: {
InputField,
PageSection
},
setup() {
const state = reactive({
destination: null,
whenDate: {
start: null,
span: null
},
travelType: null,
countries: { ...countryData }
})
return () => (
<PageSection classes="md:pt-40 pt-8 bg-gray-100" heading="Where do you wanna go today?">
<svg slot="top" class="absolute top-0 left-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#ebeff2"
fill-opacity="1"
d="M0,96L80,101.3C160,107,320,117,480,112C640,107,800,85,960,90.7C1120,96,1280,128,1360,144L1440,160L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"
></path>
</svg>
<form class="flex justify-center mt-4 md:mt-12 -mx-1 text-center flex-wrap">
<InputField
v-model={state.destination}
type="select"
placeholder="Where are you going?"
width="3/12"
options={state.countries}
required={true}
/>
<InputField
v-model={state.whenDate}
type="date"
placeholder="When are you travelling?"
width="3/12"
required={true}
/>
<InputField
v-model={state.travelType}
placeholder="Tell us what you're doing there"
width="3/12"
required={true}
/>
<div class="px-1 w-full md:w-2/12 mt-3 md:mt-0">
<button class="btn btn-primary bg-primary w-full h-full">Search</button>
</div>
</form>
</PageSection>
)
}
})
环境信息：
System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Binaries:
Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.19.1 - ~\AppData\Local\Yarn\bin\yarn.CMD
npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.19008.1.0
npmPackages:
@fortawesome/vue-fontawesome: 0.1.7
@nuxt/vue-app: 2.10.1
@nuxt/vue-renderer: 2.10.1
@vue/babel-helper-vue-jsx-merge-props: 1.0.0
@vue/babel-plugin-transform-vue-jsx: 1.0.0
@vue/babel-preset-jsx: 1.1.1
@vue/babel-sugar-functional-vue: 1.0.0
@vue/babel-sugar-inject-h: 1.0.0
@vue/babel-sugar-v-model: 1.1.1
@vue/babel-sugar-v-on: 1.1.0
@vue/component-compiler-utils: 3.0.0
@vue/composition-api: ^0.3.2 => 0.3.2
@vue/eslint-config-prettier: ^5.0.0 => 5.0.0
eslint-plugin-vue: ^5.2.2 => 5.2.3
typescript: 3.6.4
vue: 2.6.10
vue-carousel: ^0.18.0 => 0.18.0
vue-cli-webpack: 1.0.0
vue-client-only: 2.0.0
vue-eslint-parser: 5.0.0 (2.0.3)
vue-hot-reload-api: 2.3.4
vue-loader: 15.7.1
vue-meta: 2.3.1
vue-no-ssr: 1.1.1
vue-router: 3.0.7
vue-server-renderer: 2.6.10
vue-spinner: ^1.0.3 => 1.0.3
vue-style-loader: 4.1.2
vue-template-compiler: 2.6.10
vue-template-es2015-compiler: 1.9.1
vuex: 3.1.1
npmGlobalPackages:
@vue/cli: Not Found
我正在使用Nuxt，Nuxt Typescript，TSX和Vue Composition API。当我将.vue组件转换为.tsx组件时，没有渲染方法，而是从设置函数返回JSX时，我得到...