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?

Answer 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'
}