API Vue Composition: невозможно прочитать свойство '$ createElement' из неопределенного - PullRequest
1 голос
/ 27 октября 2019

Я использую Nuxt, Nuxt Typescript, TSX и Vue Composition API. Когда я преобразовал .vue компонент в .tsx один, без метода рендеринга, но вместо этого возвращая JSX из функции установки, я получаю следующую ошибку во время выполнения:

Невозможно прочитать свойство '$ createElement' с неопределенным значением

Из моего стека, указанного выше, я не знал, какая часть может вызывать эту проблему, поэтому я предполагаю, что она должна что-то делатьс пакетом 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
...