Vue router : TypeError: Cannot read property '$createElement' of undefined

Question

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.

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 <router-view></router-view> 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.

When I try to load this component, I get 2 warning and an error :

Warning 1 :

[vue-router] Failed to resolve async component render: TypeError: Cannot read property '$createElement' of undefined

Warning 2:

[vue-router] uncaught error during route navigation

Error:

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&index=0!./src/pages/config-pages/sms/smsConfigDetails.vue (app.js:1656), <anonymous>:5:16)
    at eval (vue-router.esm.js?fe87:1774)
    at eval (vue-router.esm.js?fe87:1801)
    at Array.map (<anonymous>)
    at eval (vue-router.esm.js?fe87:1801)
    at Array.map (<anonymous>)
    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)

My routing looks like this; both my beforeEnter hooks are called when they should be, the component that fail to load is smsConfigDetails:

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: () => import('layouts/default'),
    children: [
      { path: '', component: () => import('pages/index') },
      [...]
      {
        path: 'allconfigs',
        component: allConfigs,
        children: [
          {
            path: 'sms',
            component: smsConfigs,
            children: [
              {
                path: ':configId',
                components: smsDetails,
                beforeEnter: (to, from, next) => {
                  console.log('SMS Details beforeEnter()')
                  next()
                }
              }
            ],
            beforeEnter: (to, from, next) => {
              console.log('SMS list beforeEnter()')
              next()
            }
          }
        ]
      }
      [...]
    ]
  },

  { // Always leave this as last one
    path: '*',
    component: () => import('pages/404')
  }
]

The code of the component that fails to load is pretty simple for now :

<template>
  <div>
    blablabla
  </div>
</template>

<script>
</script>

<style>
</style>

The parent has only one <router-view></router-view>

Solution

I got the same error message, this is how I solved it:

component: workspace

Not

components: workspace

Notice the added s

in components: workspace

Yeah as soon as I dropped the s from the route it was fine.

Like this:

component: workspace

Comments

[Niels Lucas]

this should be the accepted anwere cause it was just a spelling issue, not like the accepted answere telling it is not possible. Cause it is possible

[Sritam]

Yes this should be the accepted answer. I had the same mistake.

[varontron]

Agree with other commenters. Spelling.

[Kristiyan Tsvetanov]

Thank you so much!

[Dev Yego]

Haha, how comes we all fell into this same problem? This was definitely my problem. Thanks bud