The emergence of the problem#
Before the Chinese New Year, I developed a small project: Print Template Designer. During the development process, I actually encountered many problems. I want to take some time now to record some of these problems for future reference.
The problem occurred after I released the package. Because I need to import my print template designer into the parent project, I need to do it in the form of a lib library, which means importing it as an npm package into the parent project. Then the problem arose: when I opened the parent project page, I found that the left panel was all blank (as shown in the selected part in the figure below), which should have had component content according to common sense!
Then I opened the console and found the following error: SyntaxError: Unexpected character '<'. I found that it couldn't find the location of a chunk file and reported an error when importing. If this path does not exist, it will be redirected to /, so this error occurred.
So I sought help on the internet and finally found this article:
[VUE Error] npm lib library packaging mode, ChunkLoadError failed to load subpackage
According to the blogger's explanation,
Because lazy loading is used, when webpack compiles, the transcribed 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 blogger's solution, I chose to merge the subpackages, that is, configure the following 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 solved!