So ive been looking into vue and been experiencing an issue which i cant seem to find the solution for. Im using Vue and Vue-router. I started with the basic vue + webpack template which gave the initial boilerplate.

I've successfully added additional routes to the predefined routes which is working as expected (games, tournaments, stats and users routes works just fine). However now im unable to get additional routes to work. the "gaming" route doesnt work, ive also tried adding additional routes which does not seem to work either.

So this is my current router file (index.js):

import Vue from 'vue'
import Router from 'vue-router'
const Gaming = () => import('@/ponents/gaming.vue');
const Home = () => import('@/ponents/home.vue');
const Game = () => import('@/ponents/game.vue');
const Tournament = () => import('@/ponents/tournament.vue');
const Users = () => import('@/ponents/users.vue');
const Stats = () => import('@/ponents/stats.vue');


const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      ponent: Home
    },
    {
      path: '/games',
      name: 'Game',
      ponent: Game,
    },
    {
      path: '/wtf',
      name: 'Gaming',
      ponents: Gaming,
    },
    {
      path: '/tournaments',
      name: 'Tournament',
      ponent: Tournament
    },
    {
      path: '/users',
      name: 'Users',
      ponent: Users
    },
    {
      path: '/stats',
      name: 'Stats',
      ponent: Stats
    }
  ]
});

export default router;

Vue.use(Router);

All my routes works as expected except the "Gaming" route. The "Gaming" ponent looks like this:

<template>
  <div>
    <h1>WTF?!?!?!?!?=!?!</h1>
  </div>
</template>

<script>
  export default {
    name: 'Gaming',
    ponents: {},
    data() {
      return {}
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this ponent only -->
<style>
</style>

Ive tried to pretty much copy/paste a working ponent, And only change the name, as well as the template. But it seems to have issues. Initially i had done the route ponent imports the normal "boilerplate" way

import Stats from '@/ponents/Stats'

Which pretty much had the same result, Except this would cause an exception when attempting to navigate to the "gaming" route.

Cannot read property '$createElement' of undefined
    at render (eval at ./node_modules/vue-loader/lib/template-piler/index.js?{"id":"data-v-c9036282","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/ponents/gaming.vue (app.js:4240), <anonymous>:3:16)

All other routes worked. Ive also tried to re-create all the files and re-do the specific route which doesnt seem to work either. So im at a loss of what i can do to fix this issue?

Here i attempt to inspect the route, And as you can see the ponent is missing "everything" Inspecting the route

Also tried looking with the vue addon for chrome, Where the ponent does not get loaded into the view

Vue Chrome Extension

Uploaded the project to gdrive if someone want to tweak around with it Google Drive Link

So ive been looking into vue and been experiencing an issue which i cant seem to find the solution for. Im using Vue and Vue-router. I started with the basic vue + webpack template which gave the initial boilerplate.

I've successfully added additional routes to the predefined routes which is working as expected (games, tournaments, stats and users routes works just fine). However now im unable to get additional routes to work. the "gaming" route doesnt work, ive also tried adding additional routes which does not seem to work either.

So this is my current router file (index.js):

import Vue from 'vue'
import Router from 'vue-router'
const Gaming = () => import('@/ponents/gaming.vue');
const Home = () => import('@/ponents/home.vue');
const Game = () => import('@/ponents/game.vue');
const Tournament = () => import('@/ponents/tournament.vue');
const Users = () => import('@/ponents/users.vue');
const Stats = () => import('@/ponents/stats.vue');


const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      ponent: Home
    },
    {
      path: '/games',
      name: 'Game',
      ponent: Game,
    },
    {
      path: '/wtf',
      name: 'Gaming',
      ponents: Gaming,
    },
    {
      path: '/tournaments',
      name: 'Tournament',
      ponent: Tournament
    },
    {
      path: '/users',
      name: 'Users',
      ponent: Users
    },
    {
      path: '/stats',
      name: 'Stats',
      ponent: Stats
    }
  ]
});

export default router;

Vue.use(Router);

All my routes works as expected except the "Gaming" route. The "Gaming" ponent looks like this:

<template>
  <div>
    <h1>WTF?!?!?!?!?=!?!</h1>
  </div>
</template>

<script>
  export default {
    name: 'Gaming',
    ponents: {},
    data() {
      return {}
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this ponent only -->
<style>
</style>

Ive tried to pretty much copy/paste a working ponent, And only change the name, as well as the template. But it seems to have issues. Initially i had done the route ponent imports the normal "boilerplate" way

import Stats from '@/ponents/Stats'

Which pretty much had the same result, Except this would cause an exception when attempting to navigate to the "gaming" route.

Cannot read property '$createElement' of undefined
    at render (eval at ./node_modules/vue-loader/lib/template-piler/index.js?{"id":"data-v-c9036282","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/ponents/gaming.vue (app.js:4240), <anonymous>:3:16)

All other routes worked. Ive also tried to re-create all the files and re-do the specific route which doesnt seem to work either. So im at a loss of what i can do to fix this issue?

Here i attempt to inspect the route, And as you can see the ponent is missing "everything" Inspecting the route

Also tried looking with the vue addon for chrome, Where the ponent does not get loaded into the view

Vue Chrome Extension

Uploaded the project to gdrive if someone want to tweak around with it Google Drive Link

• javascript
• vuejs2
• vue-router

• This is a really odd issue, and I don't see anything blatantly wrong with it. Have you tried changing 1) the route path 2) the route name 3) the ponent it uses? – johnpyp Commented May 1, 2018 at 19:33
• Yeah, initially the path was /games/:match and the name Gameplaying, Then i changed it to /gaming and gaming (To attempt to create it on "root") and then i changed it again to /wtf and gaming. Also did try deleting the ponent and creating it again. As well as creating a new path/name with a new ponent in addition to this one which does not work either. So its almost like there is a limit to the amount of routes allowed – Tommy B. Commented May 1, 2018 at 19:48
• Try just changing the ponent field to Home instead of Gaming. – johnpyp Commented May 1, 2018 at 19:56
• Did not seem to work. Ive edited the question and added a link to download from google drive if you want to look closer at the rest. – Tommy B. Commented May 1, 2018 at 20:07
• I'll test it out – johnpyp Commented May 1, 2018 at 20:20

1 Answer 1

Found the issue:

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      ponent: Home
    },
    {
      path: '/games',
      name: 'Game',
      ponent: Game,
    },
    {
      path: '/wtf',
      name: 'Gaming',
      ponents <----------: Gaming,
      // Should be ponent not ponentS
    },
    {
      path: '/tournaments',
      name: 'Tournament',
      ponent: Tournament
    },
    ...

Also, you should use the standard method of importing. Without that error, I would've never found the issue.