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>

I think you don't need to nest more than one children, take a look to the official documentation router.vuejs.org/en/essentials/nested-routes.html and look a working example: jsfiddle.net/ricardoorellana/08trt6zb they are making a 3 deep nesting with only one children array — ricardoorellana
– ricardoorellana, Commented May 7, 2018 at 18:00

Thomas Lindauer · Accepted Answer · 2019-05-01 14:04:54Z

82

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

edited May 1, 2019 at 14:04

answered Sep 22, 2018 at 16:11

Thomas Lindauer

1,3111 gold badge14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Niels Lucas Over a year ago

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 Over a year ago

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

varontron Over a year ago

Agree with other commenters. Spelling.

Dev Yego Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related