Upon attempting to import a dynamic component using the import() function, I encountered the following error:
[Vue warn]: Failed to resolve async component: function () {
return __webpack_require__("./src/components/types lazy recursive ^\\.\\/field\\-.*$")("./field-" + _this.type);
}
Reason: Error: Loading chunk 0 failed.
Unfortunately, the cause of this error eludes me. Despite adjusting the esModule to false in the vue-loader config as per the Release Notes, the issue persists.
The project was set up using vue-cli 2.9.2 with the webpack template, and below is the code snippet of the problematic component:
<template>
<div>
<component :is="fieldType">
<children/>
</component>
</div>
</template>
<script>
export default {
name: 'DynamicComponent',
props: {
type: String,
},
computed: {
fieldType () {
return () => import(`./types/type-${this.type}`)
}
}
}
</script>
[RESOLVED]
The aforementioned code functions as intended. The root of the issue stemmed from the Loading chunk 0 failed error resulting from an edge case. By configuring webpack's output to {publicPath: '/'}, the chunks were being delivered relative to the root instead of their origin. This discrepancy became evident when calling the import function from an external server, where the linked chunk URL was mismatched. To rectify this, I had to adjust the webpack configuration to
output: {publicPath: 'http://localhost:8080/'}