Issue Occurrence#
Before the new year, I developed a small project: Print Template Designer. During the development process, I encountered many issues. Now I want to take some time to record these issues for future reference.
The issue occurred after I released the package. Since I needed to import my print template designer into the parent project, I had to package it as a library, similar to an npm package. Then the problem arose: when I opened the parent project page, I found that the left panel was blank (as shown in the selected area in the image below). Normally, there should be component content!
Then I opened the console and found the following error: SyntaxError: Unexpected character '<'. By setting breakpoints, I found that it couldn't find the location of a chunk file, and the error occurred when importing. If this path doesn't exist, it will redirect to /, resulting in this error.
So I sought help online and finally found this article:
[VUE Error] npm lib library packaging mode, ChunkLoadError failed to load subpackage
According to the explanation in the article,
Because lazy loading is used, when webpack compiles, the transpiled subpackage reference path is based on the "root directory of the webpage", but our target is the subpackage under node_modules//lib/. Therefore, we naturally cannot find the corresponding lazy-loaded subpackage in the js directory of the root directory of the webpage.
Finally, following the solution provided in the article, I chose to merge the subpackages. I made the following configuration in vue.config.js:
module.exports = defineConfig({
configureWebpack: {
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
// Limit to only one package, no chunk splitting
maxChunks: 1
})
]
}
})
Then I tested the package and the problem was resolved!