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

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.

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

😃

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

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!

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…

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

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

nice thanks for the insight

On 5/6/19, ricus-zero2one notifications@github.com 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

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

＠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

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

Nice @adelynx it works

fucking perfect answer

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!

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 <my-component></my-component> if you need to manually change the name use

components:{ ‘some-name’:MyComponent } <some-name></some-name>

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 …

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 install which recreated a new lock file and everything was back to normal.

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.

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

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.

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.