[Vue warn]: Failed to mount component: template or render function not defined

[iraklisg]

The situation:

I am trying to built and load a .vue module using laravel-elixir 6 and laravel-elixir-vue-2 loader

Bellow I present the setup I used:

My package.json

"devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^0.25.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-material": "^0.2.0",
    "vue-resource": "^1.0.3"
},

The list of installed vue-related packages: yarn ls | grep vue

├─ laravel-elixir-vue-2@0.2.0
│  └─ vue-loader@^9.3.2
├─ vue-hot-reload-api@2.0.6
├─ vue-loader@9.8.1
│  ├─ vue-hot-reload-api@^2.0.1
│  ├─ vue-style-loader@^1.0.0
│  ├─ vue-template-compiler@^2.0.4
│  └─ vue-template-es2015-compiler@^1.0.0
├─ vue-material@0.2.0
│  └─ vue@^2.0.2
├─ vue-resource@1.0.3
├─ vue-style-loader@1.0.0
├─ vue-template-compiler@2.0.5
├─ vue-template-es2015-compiler@1.1.1
├─ vue@2.0.5

My entry point app.js

window.Vue = require('vue');
require('vue-resource');

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app',
    mounted() {
        console.log('Root ready.')
    }
});

My component Example.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 foo">
                 I'm an example component!
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component ready.')
        }
    }

</script>

<style lang="sass" rel="stylesheet/scss">
    $myColor: #ff6be5;
    .foo {
        background: $myColor;
    }
</style>

In my gulpfile.js

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');

elixir((mix) => {
    mix.sass('test/app.scss', 'public/css/test/app.css')
        .webpack('test/app.js', 'public/js/test/app.js');
});

The gulp task completes without errors

The problem

When I am trying to load the page in the browser, I do not see the component and I get the following error

VM2926:2643 [Vue warn]: Failed to mount component: template or render function not defined. (found in component at ...../resources/assets/js/test/components/Example.vue)

More info on the problem

The problem rise up when I removed the node_modules folder from my project root and try to re-built it using the same package.json file via yarn install

Before this, I was able to built and load the Example vue component successfully

[iraklisg]

I was able to solve the problem by following the advice in https://github.com/laravel/elixir/issues/668 I was falsely calling the elixir() function in my gulpfile more than once, which ultimately caused the error