vue-3-with-router-basic-sample
vue-3-with-router-basic-sample copied to clipboard
Codesplitting wrong path
When using the vue-router code-splitting feature. The server side app throws an error when it tries to load a chunk.
(node:4442) UnhandledPromiseRejectionWarning: Error: Cannot find module './js/chunk-2d0f0612.2835b656.js'
This happens because the path gets wrongly injected in the build
/******/ // require() chunk loading for javascript
/******/
/******/ // "0" is the signal for "already loaded"
/******/ if(installedChunks[chunkId] !== 0) {
/******/ var chunk = require("./js" + ({}[chunkId]||chunkId) + "." + {"chunk-2d0f0612":"2835b656"}[chunkId] + ".js");
/******/ var moreModules = chunk.modules, chunkIds = chunk.ids;
/******/ for(var moduleId in moreModules) {
/******/ modules[moduleId] = moreModules[moduleId];
/******/ }
/******/ for(var i = 0; i < chunkIds.length; i++)
/******/ installedChunks[chunkIds[i]] = 0;
/******/ }
/******/ return Promise.all(promises);
This part here is injecting the wrong relative path ./js instead of ./
var chunk = require("./js" + ({}[chunkId]||chunkId) + "." + {"chunk-2d0f0612":"2835b656"}[chunkId] + ".js");
This can be solved by disable code splitting on the server side by adding this to vue.config.js
configureWebpack: config => {
if (process.env.SSR)
{
return {
output: {
filename: '[name].js',
chunkFilename: '[name].js'
},
plugins:
[
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
}
}
},