Vue Composition API: Cannot read property '$createElement' of undefined

Question

I'm using Nuxt, Nuxt Typescript, TSX and Vue Composition API. When I converted a .vue component into a .tsx one, without a render method, but instead returning the JSX from the setup function, I get the following error during runtime:

Cannot read property '$createElement' of undefined

From my stack listed above, I didn't know which part could be causing this problem, so I'm presuming it has something to do with the Composition API package. I'm also quite unfamiliar with the Composition API and I'm trying to learn - could be I'm just doing something wrong here?

My component looks like this:

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>
    )
  }
})

Environment Info:

  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

Mesut Mesut · Accepted Answer · 2019-11-19T17:19:17

You can't return the template from setup function. You can return reactive state, computed values, refs, methods etc.

Here is an example component using the new composition 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>

Vue Composition API: Cannot read property '$createElement' of undefined

1 Answers