Vue 组合 API：无法读取未定义的属性“$createElement”

Posted 2023-02-23

【中文标题】Vue 组合 API：无法读取未定义的属性“$createElement”

【英文标题】：Vue Composition API: Cannot read property '$createElement' of undefined

【发布时间】：2020-02-23 01:02:51

【问题描述】：

我正在使用 Nuxt、Nuxt Typescript、TSX 和 Vue 组合 API。当我将 .vue 组件转换为 .tsx 组件时，没有渲染方法，而是从设置函数返回 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?"
            
            options=state.countries
            required=true
          />
          <InputField
            v-model=state.whenDate
            type="date"
            placeholder="When are you travelling?"
            
            required=true
          />
          <InputField
            v-model=state.travelType
            placeholder="Tell us what you're doing there"
            
            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-s-s-r:  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

【参考方案1】：

您不能从设置函数返回模板。您可以返回反应状态、计算值、引用、方法等。

这是一个使用新组合 api 的示例组件：

<template>
  <div>
    <div>Count: count </div>
    <div>User: user.name,  user.age  years old. </div>
  </div>
</template>

<script>
import  ref, createComponent, reactive  from "@vue/composition-api";

export default createComponent(
  setup() 
    const count = ref(5);
    const user = reactive(
      name: "Mesut",
      age: 25
    );
    //state
    return 
      count,
      user
    ;
  
);
</script>

<style>
</style>