Vue template or render function not defined yet I am using neither?

In my case, I was getting the error because I upgraded from Laravel Mix Version 2 to 5.

In Laravel Mix Version 2, you import vue components as follows:

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

In Laravel Mix Version 5, you have to import your components as follows:

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

Here is the documentation: https://laravel-mix.com/docs/5.0/upgrade

Better, to improve performance of your app, you can lazy load your components as follows:

Vue.component("ExampleComponent", () => import("./components/ExampleComponent"));

If you used to calle a component like this:

Vue.component('dashboard', require('./components/Dashboard.vue'));

I suppose that problem occurred when you update to laravel mix 5.0 or another libraries, so you have to put .default. As like below:

Vue.component('dashboard', require('./components/Dashboard.vue').default);

I solved the same problem.


The reason you're receiving that error is that you're using the runtime build which doesn't support templates in HTML files as seen here vuejs.org

In essence what happens with vue loaded files is that their templates are compile time converted into render functions where as your base function was trying to compile from your html element.


In my case, I imported my component (in router) as:

import bsw from 'common-mod/src/components/webcommon/webcommon'

It is simply solved if I changed it to

import bsw from 'common-mod/src/components/webcommon/webcommon.vue'

If someone else keeps getting the same error. Just add one extra div in your component template.

As the documentation says:

Component template should contain exactly one root element

Check this simple example:

 import yourComponent from '{path to component}'
    export default {
        components: {
            yourComponent
        },
}

 // Child component
 <template>
     <div> This is the one! </div>
 </template>