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

[aeolusheath]

Version

3.0.1

Reproduction link

https://github.com/aeolusheath/vue-router-project

Steps to reproduce

router/index.js config like this :

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')
    },
    {
      path: '/test',
      name: 'Test',
      component: require('../components/Test.vue')
    }
  ]
})

What is expected?

work right...no warn or error:

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

route can work right, and is there some way to avoid to import first and use it in router config.

I just wanna do it like before. straightly use component: require('xxxxx')

What is actually happening?

I update webpack and vue-router to newest version, but actually before I use 1.X.X of webpack and [email protected] and they work fine

[aeolusheath]

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

[leandroruel]

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

[GeekStocks]

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!!

[vlahde]

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?

[vlahde]

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!

[aeolusheath]

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

[hahnavi]

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')
    }
  ]
})

[dhruvinprajapati]

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

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

[aeolusheath]

@dhruvinprajapati
watch detail in realease-log

[rakibulhaq]

In my case, i was using the same route name twice in multiple places i.e. one named route as a main route of a view and using the same as children route of other route was causing the issue, after removing the duplicate ones, this problem resolved.

[IsoftTech]

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 }
]

[Jhomalex]

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

[SethLee23]

same problem，.default works for me，and when i change require to import,it fixed too

import member from '../components/member.vue'
const routes = [{
  path: '/',
  component: member,
}]

[kevindiony]

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

Tal vez era por la versión de Vue (Tu código me ayudó bastante)

[nolros]

FWIW I spent half the day troubleshooting this for a customer today. Discovered that they had created a Vue CLI project in their existing app and then removed the Vue CLI app code. So none of the above would have worked. I only came upon the reference when reading the lock file. I deleted the package-lock.json file and then ran npm installwhich recreated a new lock file and everything was back to normal.