Level 53
Did you re-build after the update? npm run dev
Just curious because we get involved in something and forget to do a simple step.
1 like
Sep 19, 2017
13
Level 5
[Vue warn]: Failed to mount component: template or render function not defined.
I did a npm update and composer update today and now I get the error everywhere where I use vue : [Vue warn]: Failed to mount component: template or render function not defined, even though everything worked perfectly fine before.
This is my package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap": "^4.0.0-beta",
"cross-env": "^5.0.5",
"jquery": "^3.1.1",
"laravel-mix": "^1.4.4",
"lodash": "^4.17.4",
"popper.js": "^1.12.3",
"vue": "^2.4.4",
"vue-chartjs": "^2.8.7"
},
"dependencies": {
"chart.js": "^2.7.0",
"dropzone": "^5.1.1",
"font-awesome": "^4.7.0",
"marked": "^0.3.6",
"moment": "^2.18.1",
"purify-css": "^1.2.6",
"purifycss-webpack": "^0.7.0",
"tempusdominus-bootstrap-4": "^5.0.0-alpha9"
}
}
and my app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('dashboard', require('./components/Dashboard.vue'));
Vue.component('roles', require('./components/Roles.vue'));
Vue.component('sites-edit', require('./components/SitesEdit.vue'));
const app = new Vue({
el: '#app',
});
I would really appreciate if anybody has an idea of what it could be.
Level 5
not only once.. I tried npm run dev as well as npm run watch
Level 53
ok, well I would nuke the node_modules directory and npm install. Sometimes, that works magic and is a lot quicker then staring at the screen in disgust. Give it a try.
1 like
Level 5
installing it fresh didn't work either.. I think I will revert to the last working commit for now, although I would really love to know what causes this.. when I do npm update, it also updates [email protected] where it has been 1.0 according to my package.json in an earlier commit.. Might that be the reason?
Level 53
Yea, it is hard to solve but Mix just bumped the Vue compiler to 2.4.4 so that is where you need to check. Vue should be 2.4.4.
Level 28
Do you already have window.Vue = require('vue'); in your resources/assets/js/bootstrap.js file?
Level 24
I had a similar problem a while back and in my case it was fixed by adding
"vue-template-compiler": "^2.4.2"
to my dependencies. Perhaps it is worth a try to see if it helps?
Level 5
@ejdelmonico I have Vue 2.4.4 @sutherland I do have it in my admin.js .. I don't include it in the bootstrap.js as I want my frontend to not have vue included but the rest of the dependencies like jquery for bootstrap and that stuff.. @PaulClarke hmm.. you might be right.. just saw an error of npm when only updateing vue that the vue-template-compiler is not on the same version..I will see if it has something to do with this
I would love to see if anybody can get vue to run on latest Laravel to check, whether it only occures here, or if it is something worth reporting.
Level 53
Need to remove the require statement from global components in app.js for some reason. I did it like this:
import Flash from './components/Flash.vue';
Vue.component('flash', Flash);
and it works fine.
8 likes
Level 5
@ejdelmonico You are my hero! Wow, never would have thought of that one.. It's weard though, as this sould work I guess... Do you think it's worth reporting? Anf if yes, is it a vue-template-compiler issue or Laravel one.
Level 4
It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.
3 likes
Level 1
@EJDELMONICO - Thanks this works for me. Im really happy. Spent days trying to figure this out before I found your solution. Thanks again.
Level 2
Thansk bro it worked......
Thank you evry much !!!!!!
Please or to participate in this conversation.