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>

</template> <script> import Customer from './Customer.Vue'; export default { data() { return { customerAll: [] } }, components:{ "customer":Customer, } , methods:{ fetchUser(){ this.$http.get("customer").then(response => {this.customerAll = response.data.customers}) } }, created(){ this.fetchUser() }, mounted() { console.log('Component mounted.') } } </script>

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’ }); `

[scheMeZa]

I fixed my problem, I use and register all of my vue components:

From:

const files = require.context('./components', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)));

To:

const files = require.context('./components', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

This translates to:

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

[ankurk91]

@tmediaa Rename your Customer.Vue to Customer.vue, notice the extension should be lowercase .vue