title: Vue Composition API: Cannot read property '$createElement' of undefined
body: <p>I'm using Nuxt, Nuxt Typescript, TSX and Vue Composition API. When I converted a <code>.vue</code> component into a <code>.tsx</code> one, <strong>without</strong> a render method, but instead returning the JSX from the setup function, I get the following error during runtime:</p>
  
  <blockquote>
    <p>Cannot read property '$createElement' of undefined</p>
  </blockquote>
  
  <p>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?</p>
  
  <p>My component looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>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 () =&gt; (
        &lt;PageSection classes="md:pt-40 pt-8 bg-gray-100" heading="Where do you wanna go today?"&gt;
          &lt;svg slot="top" class="absolute top-0 left-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"&gt;
            &lt;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"
            &gt;&lt;/path&gt;
          &lt;/svg&gt;
  
          &lt;form class="flex justify-center mt-4 md:mt-12 -mx-1 text-center flex-wrap"&gt;
            &lt;InputField
              v-model={state.destination}
              type="select"
              placeholder="Where are you going?"
              width="3/12"
              options={state.countries}
              required={true}
            /&gt;
            &lt;InputField
              v-model={state.whenDate}
              type="date"
              placeholder="When are you travelling?"
              width="3/12"
              required={true}
            /&gt;
            &lt;InputField
              v-model={state.travelType}
              placeholder="Tell us what you're doing there"
              width="3/12"
              required={true}
            /&gt;
            &lt;div class="px-1 w-full md:w-2/12 mt-3 md:mt-0"&gt;
              &lt;button class="btn btn-primary bg-primary w-full h-full"&gt;Search&lt;/button&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/PageSection&gt;
      )
    }
  })
  </code></pre>
  
  <p><strong>Environment Info:</strong></p>
  
  <pre><code>  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 =&gt; 0.3.2
      @vue/eslint-config-prettier: ^5.0.0 =&gt; 5.0.0
      eslint-plugin-vue: ^5.2.2 =&gt; 5.2.3
      typescript:  3.6.4
      vue:  2.6.10
      vue-carousel: ^0.18.0 =&gt; 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 =&gt; 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
  </code></pre>