How to render async-component in vuejs2 with webpack2

Question

I want to render a particular component dynamically so define it as async component like this:

Vue.component('AsyncComponent', function (resolve) {
  require(['./components/async-component.vue'], resolve)
});

But getting this error

Error: Loading chunk 0 failed. at HTMLScriptElement.onScriptComplete (app.js:99)

So the major problem is that the chunk file's path is not specified any where, the throw 404 error, is there any webpack configuration also, that I need to specify.Thank you in advance.

craig_h · Accepted Answer · 2017-11-07 10:32:01Z

2

You can just use a dynamic import:

const AsyncComponent = () => import ('./components/async-component.vue');

Then to register it globally:

Vue.component('AsyncComponent', AsyncComponent);

or simply:

Vue.component('AsyncComponent', () => import('./components/async-component.vue');

Although this will not work if you are using vue-loader 13 or above unless you set the esModule option to false. see Release Notes

answered Nov 7, 2017 at 10:32

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

craig_h Over a year ago

It's going to be impossible for me to debug that without knowing more about your setup. Do you have babel in your project to compile ES2015 and what version of vue-loader are you using?

Kumar_14 Over a year ago

this is my vuejs webpack config

{         test:/\.vue$/,         exclude:/node_modules/,         loader: 'vue-loader',         options: {           esModule: false         }       }

and vue-loader version is 13.0.4 yes i do have babel

craig_h Over a year ago

Is babel-loader being applied to .js files and are you using babel-preset-env?

Collectives™ on Stack Overflow

How to render async-component in vuejs2 with webpack2

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related