laravel-mix: Failed to mount component: template or render function not defined.
laravel mix ver: 1.7.2 node -v : v7.9.0 npm -v: 5.5.1
when npm run watch is called get this problem: Failed to mount component: template or render function not defined.
i want to import child vue to parent vue component get this problem
laravel-mix file content: `let mix = require(‘laravel-mix’);
mix.webpackConfig({ module: { rules: [ { test: /.vue/, loaders: [‘vue-loader’] } ] } });
mix.js(‘resources/assets/js/app.js’, ‘public/js’) .sass(‘resources/assets/sass/app.scss’, ‘public/css’); `
Customers.vue file: `<template> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">Example Component</div>
<div class="panel-body">
<table class="table table-borderd table-striped table-condensed">
<thead>
<tr>
<th>Name:</th>
<th>E-mail:</th>
</tr>
</thead>
<tbody>
<!--<customer v-for="customer in customerAll" :product="customer"></customer>-->
<customer :product="customers"></customer>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
package.json file: {
“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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js”
},
“devDependencies”: {
“axios”: “^0.17”,
“bootstrap-sass”: “^3.3.7”,
“cross-env”: “^5.1”,
“jquery”: “^3.2”,
“laravel-mix”: “^1.0”,
“lodash”: “^4.17.4”,
“node-sass”: “^4.7.2”,
“vue”: “^2.5.7”,
“vue-resource”: “^1.3.5”
}
}
Customer.vue file content: <template>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis eius exercitationem iste possimus quis similique veniam vero. Aliquam autem ea eos ipsa itaque iusto labore libero magni quaerat quod!
</div> </template> <script> export default { props:["product"] } </script>app.js file: require(‘./bootstrap’);
import VueResource from ‘vue-resource’;
window.Vue = require(‘vue’);
Vue.use(VueResource);
Vue.component(‘app’, require(‘./components/Customers.vue’));
const app = new Vue({ el: ‘#app’ }); `
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 23 (7 by maintainers)
Commits related to this issue
- Add ".default" after vue component require statements. This fixes the "failed to mount component" error. https://github.com/JeffreyWay/laravel-mix/issues/1394 — committed to oldblogs/blog2019-04-26 by rgucluer 5 years ago
- fix: Add ".default" after vue component require statements. This fixes the "failed to mount component" error. https://github.com/JeffreyWay/laravel-mix/issues/1394 — committed to oldblogs/blog2019-04-26 by rgucluer 5 years ago
- fix: Failed to mount component error Add ".default" after vue component require statements. This fixes the "failed to mount component" error. https://github.com/JeffreyWay/laravel-mix/issues/1394 — committed to oldblogs/blog2019-04-26 by rgucluer 5 years ago
I fixed my problem, I use and register all of my vue components:
From:
To:
This translates to:
@tmediaa Rename your
Customer.VuetoCustomer.vue, notice the extension should be lowercase .vueBelieve you are doing this -
Then
Make sure your are not using any inline vue template.
You should read this https://github.com/JeffreyWay/laravel-mix/issues/1052 Make sure have nothing inside your app div
@ankurk91 thanks body
simple solution make sure nothing is inside
<div id="app"></div>then do thisthen
@ankurk91 when i clear this section of code in mix file i got new error like this:
Error: (You may need an appropriate loader to handle this file type.)