vue-router: Failed to mount component: template or render function not defined.

add .default to require('xxx.vue') or import('xxx.vue') it will work right

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: require('../components/HelloWorld.vue').default
    },
    {
      path: '/test',
      name: 'Test',
      component: require('../components/Test.vue').default
    }
  ]
})

maybe it’s caused by module-ref way update.

watch the vue-loader release log

vue-loader- 13.0.0 will set the vue component as a esModule by default. Before 13.0.0 vue-loader set the vue component as CommonJsModule

it worked for me: component: require('../components/HelloWorld.vue').default like the comment above

I had the same problem as above, and the fix (adding .default) worked for me. However, this “solution” perplexed me and I dug deeper. In the end, I found the cause was I got sloppy and brought in the component using ‘const’ instead of ‘import’, like this:

const flag = require('../components/flag'); // FUBAR - "template or render function not defined"
const flag = require('../components/flag').default; // Yeah! fixed!  ?????
import flag from '../components/flag'; // Oh yeah, this is how you're supposed to do it....

When I do dumb stuff like this, its a sign that the current code session needs to end and the recreational part of the day needs to begin. {pours Bourbon} Cheers!!

look at the vue-loader release log

vue-loader- 13.0.0 will set the vue component as a esModule by default. Before 13.0.0 vue-loader set the vue component as CommonJsModule

Okay turns out that this works:

import notifications from './components/ChatNotifications.vue'

as long as I remember to register my components within my app

var app = new Vue({ el: '#app', components: { notifications },

So clearly it is time for that Bourbon!

You can use dynamic import() as an alternative solution

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: () => import('../components/HelloWorld.vue')
    },
    {
      path: '/test',
      name: 'Test',
      component: () => import('../components/Test.vue')
    }
  ]
})

I had the same problem and I fixed my global components like this: Vue.component('notifications', require('./components/ChatNotifications.vue').default);

However, on my new remote server this does not work. I get error:

Unknown custom element: <notifications> - did you register the component correctly?

On my previous server and on my local develepment it works. This does not work either:

import notifications from './components/ChatNotifications.vue';

as far as I can tell my gulp and webpack versions are the same on all servers. What might be wrong here?

Thanks, it works for me. For days i’v been trying to solve it now it works by adding ‘.default’

let routes = [ {path: ‘/dashboard’, component: require(‘./components/Dashboard.vue’).default }, {path: ‘/profile’, component: require(‘./components/Profile.vue’).default } ]

Me pasó lo mismo, solucioné ésto cambiando la forma en cómo registraba mis componentes: Antes: Vue.component('pedidos', require('./components/Pedidos.vue'));

Después:

import pedidos from './components/Pedidos.vue';
const app = new Vue({
    el: '#app',
    components: {
        pedidos,
    }
});

Sin embargo, no sé exactamente qué causó el error que se aparecía. Si alguien logra encontrar a fondo la causa del error, agradecería bastante que lo compartiera

it help full to me:component: require('../components/HelloWorld.vue').default

buti can not understood why we write .default at the end