se22as / vue-3-with-router-basic-sample

21 stars 6 forks source link

Codesplitting wrong path #1

Open jan-thoma opened 4 years ago

jan-thoma commented 4 years ago

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 commented 3 years ago

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