Vue async component not working with Webpack hot module replacement

Question

I am trying to load component async. It works fine in production build but fails in development. I use hot module replacement for development and I get error on the console that component failed to load.

This is how I register my component:

 Vue.component('product-page', ()=> import('./app/components/ProductPage.vue'));

Error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve async component: function () {
        return Promise.all(/*! import() */[__webpack_require__.e(0), __webpack_require__.e(1), __webpack_require__.e(2), __webpack_require__.e(32)]).then(__webpack_require__.bind(null, /*! ././app/components/ProductPage.vue */ "./src/app/components/ProductPage.vue"));
    }

In my webpack config, I have:


output:{
     path: path.resolve(__dirname, 'dist'),
     filename: '[name].bundle.js' ,
     publicPath: 'http://localhost:8088/',
}

Is there any special configurations I need or what am I doing wrong?

Wakeel · Accepted Answer · 2021-08-22 18:33:22Z

1

I found a solution to it. I have two different webpack dev servers I use for development. Webpack uses jsonp to load chunks on demand. The generated function to load chunks was the same thing for the two servers. This was causing problem resolving the chunk url. Server A was trying to load assets using Serve B port.

Solution

I had to explicitly set the function name for the jsonp. This can be done with webpack output config property.

Example

ouput: {
   filename: '[name].bundle.js',
   jsonpFunction: 'myCustomFunctionName'
}

answered Aug 22, 2021 at 18:33

Wakeel

5,2602 gold badges16 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Vue async component not working with Webpack hot module replacement

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related