问题
This is my main javascript file:
import Vue from 'vue'
new Vue({
el: '#app'
});
My HTML file:
<body>
<div id="app"></div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
Webpack configuration of Vue.js with the runtime build:
alias: {
'vue$': 'vue/dist/vue.runtime.common.js'
}
I am still getting this well known error:
[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)
How come when I don't even have a single thing inside my #app div where I mount Vue, I am still getting a render/template error? It says found in root but there is nothing to be found because it does not even have any content?
How am I suppose to mount if this does not work?
Edit:
I have tried it like this which seems to work:
new Vue(App).$mount('#app');
It make sense because using the el property implies you are 'scanning' that dom element for any components and it's useless because the runtime build does not have a compiler.
Still it is an extremely strange error message to throw, especially when I have my entire #app div emptied out.
Hopefully somebody could confirm my thoughts.
回答1:
The reason you're receiving that error is that you're using the runtime build which doesn't support templates in HTML files as seen here vuejs.org
In essence what happens with vue loaded files is that their templates are compile time converted into render functions where as your base function was trying to compile from your html element.
回答2:
In my case, I imported my component (in router) as:
import bsw from 'common-mod/src/components/webcommon/webcommon'
It is simply solved if I changed it to
import bsw from 'common-mod/src/components/webcommon/webcommon.vue'
回答3:
If someone else keeps getting the same error. Just add one extra div in your component template.
As the documentation says:
Component template should contain exactly one root element
Check this simple example:
import yourComponent from '{path to component}'
export default {
components: {
yourComponent
},
}
// Child component
<template>
<div> This is the one! </div>
</template>
回答4:
In my case, I was getting the error because I upgraded from Laravel Mix Version 2 to 5.
In Laravel Mix Version 2, you import vue components as follows:
Vue.component(
'example-component',
require('./components/ExampleComponent.vue')
);
In Laravel Mix Version 5, you have to import your components as follows:
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
Here is the documentation: https://laravel-mix.com/docs/5.0/upgrade
Better, to improve performance of your app, you can lazy load your components as follows:
Vue.component("ExampleComponent", () => import("./components/ExampleComponent"));
回答5:
I personally ran into the same error. None of the above solutions worked for me.
In fact, my component looks like this (in a file called my-component.js) :
Vue.component('my-component', {
data() {
return {
...
}
},
props: {
...
},
template:`
<div>
...
</div>
`
});
And I imported it like this in another component:
import MyComponent from '{path-to-folder}/my-component';
Vue.component('parent_component', {
components: {
MyComponent
}
});
The weird thing is that this worked in some components but not in this "parent_component". So what I had to do in the component itself was stock it in a variable and export it as default.
const MyComponent = Vue.component('my-component', {
data() {
return {
...
}
},
props: {
...
},
template:`
<div>
...
</div>
`
});
export default MyComponent;
It could seem obvious but as I said above, it works in 1 other component without this so I couldn't really understand why, but at least, this works everywhere now.
回答6:
I am using Typescript with vue-property-decorator and what happened to me is that my IDE auto-completed "MyComponent.vue.js" instead of "MyComponent.vue". That got me this error.
It seems like the moral of the story is that if you get this error and you are using any kind of single-file component setup, check your imports in the router.
回答7:
In my case, I was using a default import:
import VueAutosuggest from 'vue-autosuggest';
Using a named import fixed it:
import {VueAutosuggest} from 'vue-autosuggest';
回答8:
I cannot believe how did I fix the issue! weird solution!
I kept the app running then I removed all template tags and again I returned them back and it worked! but I don't understand what happened.
回答9:
I got same error before I forgot to enclose component content in template element.
I have this initially
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './com/Home.vue';
Vue.use(VueRouter);
Vue.router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
]
});
Then in Home.vue I have:
<h1>Hello Vue</h1>
Hence the error:
Failed to mount component: template or render function not defined.
found in
---> <Home> at resources/js/com/Home.vue
<Root>
Enclosing in element fixed the error:
<template>
<h1>Hello Vue</h1>
</template>
回答10:
Something like this should resolve the issue..
Vue.component(
'example-component',
require('./components/ExampleComponent.vue').default);
回答11:
When used with storybook and typescirpt, I had to add
.storybook/webpack.config.js
const path = require('path');
module.exports = async ({ config, mode }) => {
config.module.rules.push({
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
},
}
],
});
return config;
};
来源：https://stackoverflow.com/questions/41983767/vue-template-or-render-function-not-defined-yet-i-am-using-neither