Vue router not loading component

Question

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('@/components/gaming.vue');
const Home = () => import('@/components/home.vue');
const Game = () => import('@/components/game.vue');
const Tournament = () => import('@/components/tournament.vue');
const Users = () => import('@/components/users.vue');
const Stats = () => import('@/components/stats.vue');


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

export default router;

Vue.use(Router);

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

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

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

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

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

import Stats from '@/components/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-compiler/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/components/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 component is missing "everything" Inspecting the route

Also tried looking with the vue addon for chrome, Where the component 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

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 component it uses? — johnpyp
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 component and creating it again. As well as creating a new path/name with a new component 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.
Try just changing the component field to Home instead of Gaming. — johnpyp
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.

johnpyp johnpyp · Accepted Answer · 2018-05-01T20:50:42

Found the issue:

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

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

Vue router not loading component

1 Answers