Skip to content
This repository has been archived by the owner on Apr 9, 2023. It is now read-only.

Vue Prerender-SPA / Webpack - Application won't initialise with named cacheGroups unless explicitly listed in pages config chunks section? #479

Open
owlyowl opened this issue Jan 5, 2022 · 0 comments

Comments

@owlyowl
Copy link

owlyowl commented Jan 5, 2022

I've been beating my head against the webpack/vue-cli wall for the last few days so thought I'd reach out.

I have a pages config setup like so:

publicPath: '',
outputDir: 'dist',
pages: {
            index: {
                entry: 'src/entry.ts',
                template: 'public/entry.html'
            }
        }

I've chunked out some named cacheGroups so I can group some modules which were commonly being duplicated across chunks:

 configureWebpack: {
        output: {
            filename: 'js/index.js',
            chunkFilename: 'js/[name].[contenthash:8].js'
        },
        resolve: {
            alias: {
                vue$: path.resolve('./node_modules/vue/dist/vue.runtime.esm.js')
            }
        },
        optimization: {
            splitChunks: {
                chunks: 'all',
                cacheGroups: {
                    libraries: {
                        name: 'common-lib',
                        test: /[\\/]node_modules[\\/]@mycommonlib[\\/].*/
                    },
                    default: false,
                    common: false,
                    vue: {
                        name: 'vue-core',
                        test: /[\\/]node_modules[\\/](vue|vue-class-component|vue-property-decorator)[\\/]/,
                        chunks: 'all'
                    },
                    vuei18n: {
                        name: 'vue-translation',
                        test: /[\\/]node_modules[\\/]vue-(i18n|translate-plugin)/,
                        chunks: 'all'
                    }
                }
            }
        }
    }

I'm trying to run a few routes up in puppeteer using the PrerenderSPAPlugin. It works flawlessly if I omit the optimization.splitChunks section from my config. The minute I include it, Puppeteer will hang up and never initialise my application.

The only way I seem to be able to get it to run anything at all is if I manually include all my named chunks in the page config (which then defeats the purpose of Vue/webpack loading in chunks as/when needed:

e.g:

pages: {
            index: {
                entry: 'src/entry.ts',
                template: 'public/entry.html',
                chunks: ['common-lib', 'vue-translation', 'vue-core', 'index']
            }
        },

I've been scouring the Webpack and Vue documentation with little/no luck.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant