{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 够拽才男人 的问题《Vue template or render function not defined yet I》','https://www.manongdao.com/q-1234988.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
If you used to calle a component like this:
I suppose that problem occurred when you update to laravel mix 5.0 or another libraries, so you have to put .default...
Vue.component('dashboard', require('./components/Dashboard.vue').default);
I solved the same problem.
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';As a Summary of all the posts
This error:
You're getting because of a certain problem that's preventing your component from being mounted.
This can be caused by a lot of different issues, as you can see from the different posts here. Debug your component thoroughly, and be aware of everything that is maybe not done correctly and might prevent the mount.
I was getting the error when my component file was not encoded correctly...