vue-3-with-router-basic-sample icon indicating copy to clipboard operation
vue-3-with-router-basic-sample copied to clipboard

Codesplitting wrong path

Open jan-thoma opened this issue 3 years ago • 1 comments

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");

jan-thoma avatar Dec 02 '20 11:12 jan-thoma

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
                    })
                ]
            }
        }
    },

jan-thoma avatar Dec 03 '20 09:12 jan-thoma