Laravel-mix: [Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

[jericopulvera]

When I compiled using laravel mix in one of my old projects I get this error

[Vue warn]: Failed to mount component: template or render function not defined. 
(found in root instance

it works fine on Laravel elixir. why do I get this error?

[jericopulvera]

solved it by deleting all of the folders in node_modules that has vue in it and run npm install again.

[sandervanhooft]

@jericopulvera Reinstalling the node modules (rm -rf node_modules/ && npm i) didn't fix it for me. Any clue?

[sandervanhooft]

Nvm, it was a issue with the Vue package I was using :).

[adelynx]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

[MRROOX]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

It Works for me thank you!

[nitesh146]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Worked for me too! thanks a lot...

[afshinhatampour]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

thank you worked for me

[mwangaben]

Nice @adelynx it works

[ricus-zero2one]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Had to update +- 200 vue components to add .default but happy to say it works

[mwangaben]

nice thanks for the insight

On 5/6/19, ricus-zero2one [e-mail] wrote:

It should be require('./components/Example.vue').default. Since v13,
vue-loader exports the component as the default key, which still works the
same when using import, but requires the above when using require.

Had to update +- 200 vue components to add .default but happy to say it
works

--
You are receiving this because you commented.
Reply to this email directly or view it on GitHub:
https://github.com/JeffreyWay/laravel-mix/issues/198#issuecomment-489569593

[L-tech]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Thanks. This worked for me

[Jacq]

I had also this error: "Failed to mount component: template or render function not defined ..."
, when loading an App.vue only with using:
new Vue({
el: '#app',
render: h => h(App),
})

I had no issues with the missing .default, I am using import. I found other relations of this error to the use of the vue runtime instead of the full vue dist >but that was not my case.

Finally I notice that I had enabled the VueLoaderPlugin and the vue-loader rule:

{
test: /.vue$/,
loader: 'vue-loader'
}
If I remove that rule the above error goes away.
Was my rule overriding some vue default configuration from laravel-mix which created the above error?,
Cheers

[pengmingzengdd01]

＠adelynx

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Thanks,It works

[audetcameron]

So is the answer changing

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

to

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

for all components?

Update:

https://laravel-mix.com/docs/4.0/upgrade

:)

[creditfirst612]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

thanks. it works fine to me.

[tanvoid0]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Thanks. I'm new to laravel vue. And working on my first project. This seemed a deadline for me, and yet, the solve found. Thanks a lot.

[sbassah]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Thanks. It worked for me.

[nandapp]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Super works, you save my day, thanks

[imtiazraqib]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

This was the fix I needed, thank you so much.

[muhammadali7768]

solved it by deleting all of the folders in node_modules that has vue in it and run npm install again.

Thanks removing node_modules directory and running npm install worked for me

[nolros]

FWIW in some cases, such as running Vue CLI ui, the package-json.lock file is changed. People then just delete the CLI project, but the lock file still has CLI code which will cause rendering issues like above. I spent half the day troubleshooting this for a customer today. Discovered that they had created a Vue CLI project in their existing app and then deleted the Vue CLI project directory without any changes in CLI ui. So none of the above worked. I only came upon the reference when reading the lock file. I deleted the package-lock.json file and then ran npm installwhich recreated a new lock file and everything was back to normal.

[farhangkomad]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Worked for me too! Thanks ..

[chaderenyore]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Everyone is saying it's working...
Please help me cause It doesnt apply to me.

[audetcameron]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Everyone is saying it's working...
Please help me cause It doesnt apply to me.

what version of laravel-mix are you using ?

[chaderenyore]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Everyone is saying it's working...
Please help me cause It doesnt apply to me.

what version of laravel-mix are you using ?

Please am not Using laravel.
am using pure vue.js

[audetcameron]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

Everyone is saying it's working...
Please help me cause It doesnt apply to me.

what version of laravel-mix are you using ?

Please am not Using laravel.
am using pure vue.js

if you are not using larave-mix, outside of laravel. Then I suggest you start here https://vuejs.org/v2/guide/single-file-components.html

your code will most likely look like

    import MyComponent from './path/YourComponent.vue';
    const app = new Vue({
        el: '#app',
        components:{
            MyComponent
        }
    });

Note that vue will use the camel case as hyphen so the component name would be
if you need to manually change the name use

components:{
'some-name':MyComponent
}

[mtariq786]

It should be require('./components/Example.vue').default. Since v13, vue-loader exports the component as the default key, which still works the same when using import, but requires the above when using require.

worked for me also!

[arukompas]

For me, the problem was with the Vue.js version 2.2.2

export default {
  components: {
    VideoPlayer: () => import('App/components/VideoPlayer.vue'),
  }
}

This caused the error [Vue warn]: Failed to mount component: template or render function not defined. when trying to load that component.

Solution was to upgrade the Vuejs to the latest version 2.6.12. As soon as I did that, dynamically loaded components started working. Hope this helps someone who's in the same boat :)

[hnamvuong]

So is the answer changing

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

to

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

for all components?

Update:

https://laravel-mix.com/docs/4.0/upgrade

:)

thank u so much! it work for me