• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

Cannot read property ‘$createElement’ of undefined

Vue cps12345 1年前 (2020-07-16) 264次浏览 0个评论
1个

我正在使用Nuxt,Nuxt Typescript,TSX和Vue Composition API。当我将一个.vue组件转换为.tsx一个没有渲染方法的组件,而是从设置函数返回JSX时,在运行时出现以下错误:

Cannot read property ‘$createElement’ of undefined

从上面列出的堆栈中,我不知道哪个部分可能导致此问题,因此我推测它与Composition API程序包有关。我也不太熟悉Composition API,所以我想学习-可能是我在这里做错了吗?

我的组件如下所示:

<code><span class="kwd">import</span> <span class="pun">{</span><span class="pln"> createComponent</span><span class="pun">,</span><span class="pln"> reactive </span><span class="pun">}</span> <span class="kwd">from</span> <span class="str">'@vue/composition-api'</span>
<span class="kwd">import</span> <span class="typ">InputField</span> <span class="kwd">from</span> <span class="str">'@/components/InputField.vue'</span>
<span class="kwd">import</span> <span class="typ">PageSection</span> <span class="kwd">from</span> <span class="str">'@/components/PageSection.vue'</span>
<span class="kwd">import</span><span class="pln"> countryData </span><span class="kwd">from</span> <span class="str">'@/data/countries.json'</span>

<span class="kwd">export</span> <span class="kwd">default</span><span class="pln"> createComponent</span><span class="pun">({</span><span class="pln">
  components</span><span class="pun">:</span> <span class="pun">{</span>
    <span class="typ">InputField</span><span class="pun">,</span>
    <span class="typ">PageSection</span>
  <span class="pun">},</span><span class="pln">

  setup</span><span class="pun">()</span> <span class="pun">{</span>
    <span class="kwd">const</span><span class="pln"> state </span><span class="pun">=</span><span class="pln"> reactive</span><span class="pun">({</span><span class="pln">
      destination</span><span class="pun">:</span> <span class="kwd">null</span><span class="pun">,</span><span class="pln">
      whenDate</span><span class="pun">:</span> <span class="pun">{</span><span class="pln">
        start</span><span class="pun">:</span> <span class="kwd">null</span><span class="pun">,</span><span class="pln">
        span</span><span class="pun">:</span> <span class="kwd">null</span>
      <span class="pun">},</span><span class="pln">
      travelType</span><span class="pun">:</span> <span class="kwd">null</span><span class="pun">,</span><span class="pln">
      countries</span><span class="pun">:</span> <span class="pun">{</span> <span class="pun">...</span><span class="pln">countryData </span><span class="pun">}</span>
    <span class="pun">})</span>

    <span class="kwd">return</span> <span class="pun">()</span> <span class="pun">=></span> <span class="pun">(</span>
      <span class="pun"><</span><span class="typ">PageSection</span><span class="pln"> classes</span><span class="pun">=</span><span class="str">"md:pt-40 pt-8 bg-gray-100"</span><span class="pln"> heading</span><span class="pun">=</span><span class="str">"Where do you wanna go today?"</span><span class="pun">></span>
        <span class="pun"><</span><span class="pln">svg slot</span><span class="pun">=</span><span class="str">"top"</span> <span class="kwd">class</span><span class="pun">=</span><span class="str">"absolute top-0 left-0"</span><span class="pln"> xmlns</span><span class="pun">=</span><span class="str">"http://www.w3.org/2000/svg"</span><span class="pln"> viewBox</span><span class="pun">=</span><span class="str">"0 0 1440 320"</span><span class="pun">></span>
          <span class="pun"><</span><span class="pln">path
            fill</span><span class="pun">=</span><span class="str">"#ebeff2"</span><span class="pln">
            fill</span><span class="pun">-</span><span class="pln">opacity</span><span class="pun">=</span><span class="str">"1"</span><span class="pln">
            d</span><span class="pun">=</span><span class="str">"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"</span>
          <span class="pun">></</span><span class="pln">path</span><span class="pun">></span>
        <span class="pun"></</span><span class="pln">svg</span><span class="pun">></span>

        <span class="pun"><</span><span class="pln">form </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"flex justify-center mt-4 md:mt-12 -mx-1 text-center flex-wrap"</span><span class="pun">></span>
          <span class="pun"><</span><span class="typ">InputField</span><span class="pln">
            v</span><span class="pun">-</span><span class="pln">model</span><span class="pun">={</span><span class="pln">state</span><span class="pun">.</span><span class="pln">destination</span><span class="pun">}</span><span class="pln">
            type</span><span class="pun">=</span><span class="str">"select"</span><span class="pln">
            placeholder</span><span class="pun">=</span><span class="str">"Where are you going?"</span><span class="pln">
            width</span><span class="pun">=</span><span class="str">"3/12"</span><span class="pln">
            options</span><span class="pun">={</span><span class="pln">state</span><span class="pun">.</span><span class="pln">countries</span><span class="pun">}</span><span class="pln">
            required</span><span class="pun">={</span><span class="kwd">true</span><span class="pun">}</span>
          <span class="pun">/></span>
          <span class="pun"><</span><span class="typ">InputField</span><span class="pln">
            v</span><span class="pun">-</span><span class="pln">model</span><span class="pun">={</span><span class="pln">state</span><span class="pun">.</span><span class="pln">whenDate</span><span class="pun">}</span><span class="pln">
            type</span><span class="pun">=</span><span class="str">"date"</span><span class="pln">
            placeholder</span><span class="pun">=</span><span class="str">"When are you travelling?"</span><span class="pln">
            width</span><span class="pun">=</span><span class="str">"3/12"</span><span class="pln">
            required</span><span class="pun">={</span><span class="kwd">true</span><span class="pun">}</span>
          <span class="pun">/></span>
          <span class="pun"><</span><span class="typ">InputField</span><span class="pln">
            v</span><span class="pun">-</span><span class="pln">model</span><span class="pun">={</span><span class="pln">state</span><span class="pun">.</span><span class="pln">travelType</span><span class="pun">}</span><span class="pln">
            placeholder</span><span class="pun">=</span><span class="str">"Tell us what you're doing there"</span><span class="pln">
            width</span><span class="pun">=</span><span class="str">"3/12"</span><span class="pln">
            required</span><span class="pun">={</span><span class="kwd">true</span><span class="pun">}</span>
          <span class="pun">/></span>
          <span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"px-1 w-full md:w-2/12 mt-3 md:mt-0"</span><span class="pun">></span>
            <span class="pun"><</span><span class="pln">button </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"btn btn-primary bg-primary w-full h-full"</span><span class="pun">></span><span class="typ">Search</span><span class="pun"></</span><span class="pln">button</span><span class="pun">></span>
          <span class="pun"></</span><span class="pln">div</span><span class="pun">></span>
        <span class="pun"></</span><span class="pln">form</span><span class="pun">></span>
      <span class="pun"></</span><span class="typ">PageSection</span><span class="pun">></span>
    <span class="pun">)</span>
  <span class="pun">}</span>
<span class="pun">})</span></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 => 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
喜欢 (0)

您必须 登录 才能发表评论!