VueJs: Failed To Mount Component
11,172
You might be running into the breaking change described here: https://github.com/vuejs/vue-loader/releases/tag/v13.0.0
Try adding .default to the end of your require().
component: require('./index/index.vue').default
Author by
Jan Schmutz
Updated on June 05, 2022Comments
-
Jan Schmutz almost 2 years
I'm using Vue Router and instead of loading the component it throws me this vague error:
Failed to mount component: template or render function not defined. found in ---> <Anonymous> <Root>Here is my entry point (app.js) (note I'm using multiple entries in combination with the CommonsChunksPlugin):
import Vue from 'vue' import '../../../assets/css/main.css' import App from './app.vue' new Vue(App).$mount('#app')The Html File (app.html)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> </head> <body> <div id="app"></div> </body> </html>(app.vue)
<template> <div> <router-view></router-view> </div> </template> <script> import { router, } from './bootstrap.js'; export default { router, }; </script>The Router:
import Vue from 'vue'; import VueRouter from 'vue-router'; var routes = [ { path: '/login', name: 'login.index', component: require('./index/index.vue'), }, { path: '/', redirect: '/login', }, ]; Vue.use(VueRouter); export const router = new VueRouter({ routes, }); Vue.router = router; export default { router, };And Finally the Component:
<template> <div> <h1>Test</h1> </div> </template> <script> export default {} </script>I get redirected to /login as expected but the component won't load.