title: Vue router : TypeError: Cannot read property '$createElement' of undefined
body: <p>So, I am pretty new to vue.js and it might very well be as stupid mistake from me, but alas, Google doesn't seem to be my friend today as I've been searching for a bit more than 2 hours and found nothing.</p>
  
  <p>My problem occurs when trying to load a component. This component is nested in other components, and the router is supposed to load it. I have other components that load that way (using <code>&lt;router-view&gt;&lt;/router-view&gt;</code> and the router) without any problem. The only thing different with this component is that it is nested 3 levels under its root, while amongst all my other components, the deepest I go is 2 levels.</p>
  
  <p>When I try to load this component, I get 2 warning and an error :</p>
  
  <p><strong>Warning 1 :</strong></p>
  
  <pre><code>[vue-router] Failed to resolve async component render: TypeError: Cannot read property '$createElement' of undefined
  </code></pre>
  
  <p><strong>Warning 2:</strong></p>
  
  <pre><code>[vue-router] uncaught error during route navigation
  </code></pre>
  
  <p><strong>Error:</strong></p>
  
  <pre><code>TypeError: Cannot read property '$createElement' of undefined
      at render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-d2e33d82","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&amp;index=0!./src/pages/config-pages/sms/smsConfigDetails.vue (app.js:1656), &lt;anonymous&gt;:5:16)
      at eval (vue-router.esm.js?fe87:1774)
      at eval (vue-router.esm.js?fe87:1801)
      at Array.map (&lt;anonymous&gt;)
      at eval (vue-router.esm.js?fe87:1801)
      at Array.map (&lt;anonymous&gt;)
      at flatMapComponents (vue-router.esm.js?fe87:1800)
      at eval (vue-router.esm.js?fe87:1736)
      at iterator (vue-router.esm.js?fe87:1943)
      at step (vue-router.esm.js?fe87:1717)
  </code></pre>
  
  <p>My routing looks like this; both my <code>beforeEnter</code> hooks are called when they should be, the component that fail to load is <code>smsConfigDetails</code>:
  </p>
  
  <pre><code>import allConfigs from 'pages/config-pages/allConfigs'
  import smsConfigs from 'pages/config-pages/sms/allSmsConfigs'
  import smsDetails from 'pages/config-pages/sms/smsConfigDetails'
  
  export default [
    {
      path: '/',
      component: () =&gt; import('layouts/default'),
      children: [
        { path: '', component: () =&gt; import('pages/index') },
        [...]
        {
          path: 'allconfigs',
          component: allConfigs,
          children: [
            {
              path: 'sms',
              component: smsConfigs,
              children: [
                {
                  path: ':configId',
                  components: smsDetails,
                  beforeEnter: (to, from, next) =&gt; {
                    console.log('SMS Details beforeEnter()')
                    next()
                  }
                }
              ],
              beforeEnter: (to, from, next) =&gt; {
                console.log('SMS list beforeEnter()')
                next()
              }
            }
          ]
        }
        [...]
      ]
    },
  
    { // Always leave this as last one
      path: '*',
      component: () =&gt; import('pages/404')
    }
  ]
  </code></pre>
  
  <p>The code of the component that fails to load is pretty simple for now :
  </p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      blablabla
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>The parent has only one <code>&lt;router-view&gt;&lt;/router-view&gt;</code></p>