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

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'

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"));

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.


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.