splitChunks settings breaks the build

[a-rusak]

Hi

Trying to to extract third-party libraries into a separate vendor chunk, using webpack optimization.splitChunks.cacheGroups settings:

     splitChunks: {
       cacheGroups: {
         vendor: {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendors',
           chunks: 'all',
         },
       },
     },

Got an error:

assets by status 269 KiB [cached] 5 assets
Entrypoint index = assets/js/runtime.1b128ecc.js assets/js/vendors.c9af3c70.js index.html assets/css/styles.d17f6b81.css
Entrypoint main = assets/js/runtime.1b128ecc.js assets/js/vendors.c9af3c70.js assets/js/main.750f9c8b.js
orphan modules 76.6 KiB [orphan] 58 modules
runtime modules 3.36 KiB 6 modules
cacheable modules 404 KiB
  asset modules 4.42 KiB
    data:image/svg+xml,%3csvg xmlns=%27.. 281 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 279 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 161 bytes [built] [code generated]
    data:image/svg+xml,%3csvg xmlns=%27.. 271 bytes [built] [code generated]
    + 12 modules
  javascript modules 400 KiB
    modules by path ./node_modules/ 208 KiB 4 modules
    modules by path ./src/ 192 KiB
      ./src/index.pug 337 bytes [built] [code generated]
      + 2 modules

ERROR in [initial] assets/js/vendors.0608b1c6.js
Cannot destructure property 'managedFiles' of 'module.buildInfo.snapshot' as it is undefined.
TypeError: Cannot destructure property 'managedFiles' of 'module.buildInfo.snapshot' as it is undefined.
    at C:\Users\arusak\Documents\git\pug-plugin-split-chunk-issue\node_modules\pug-plugin\src\index.js:623:21
    at Hook.eval [as call] (eval at create (C:\Users\arusak\Documents\git\pug-plugin-split-chunk-issue\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at C:\Users\arusak\Documents\git\pug-plugin-split-chunk-issue\node_modules\webpack\lib\Compilation.js:4644:31
    at C:\Users\arusak\Documents\git\pug-plugin-split-chunk-issue\node_modules\webpack\lib\Cache.js:93:5
    at Hook.eval [as callAsync] (eval at create (C:\Users\arusak\Documents\git\pug-plugin-split-chunk-issue\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Cache.get (C:\Users\arusak\Documents\git\pug-plugin-split-chunk-issue\node_modules\webpack\lib\Cache.js:75:18)
    at ItemCacheFacade.get (C:\Users\arusak\Documents\git\pug-plugin-split-chunk-issue\node_modules\webpack\lib\CacheFacade.js:111:15)
    at C:\Users\arusak\Documents\git\pug-plugin-split-chunk-issue\node_modules\webpack\lib\Compilation.js:4560:22
    at arrayEach (C:\Users\arusak\Documents\git\pug-plugin-split-chunk-issue\node_modules\neo-async\async.js:2405:9)
    at Object.each (C:\Users\arusak\Documents\git\pug-plugin-split-chunk-issue\node_modules\neo-async\async.js:2846:9)

webpack 5.73.0 compiled with 1 error in 5315 ms

Sample repo for reproduce the issue

Thank you!

[webdiscus]

Hello @a-rusak,

thanks for bug reporting with repo. I can reproduce the issue.
As a temporary solution, you can replace the test: /[\\/]node_modules[\\/]/, to test: /\.(js)$/,.
I try to fix it.

[webdiscus]

@a-rusak

The issue is fixed in v3.1.0.

Note
Instead of test /[\\/]node_modules[\\/]/ use the /[\\/]node_modules[\\/].+\.js$/, because Webpack has the BUG/Feature in SplitChunksPlugin. Using styles, scripts from node modules with splitChunks, Webpack concatenate source of CSS together with JS in one file. To avoid this issue, the optimization.cacheGroups.{cacheGroup}.test MUST match exactly only JS files.

[a-rusak]

I've updated to 3.1.0 and build passed, with test: /[\\/]node_modules[\\/]/ on webpack config.

Unfortunately, CSS from node_modules doesn't move to separate chunk.

Anyway thanks for the help

[webdiscus]

Unfortunately, CSS from node_modules doesn't move to separate chunk.

What do you mean "doesn't move to separate chunk"?

The main.js will be spitted to:

main.750f9c8b.js
runtime.1b128ecc.js
vendors.c9af3c70.js

The styles.scss will be saved to:

styles.d17f6b81.css

Splitting CSS to many chunk is principal impossible. Webpack can not do it, because imported bootstrap styles in your style file is one CSS bundle generated by sass-loader. Therefore a vendor styles should be specified in Pug separately.

Splitting works only for JS files.

If your want save bootstrap styles separate from your styles.scss, then do it self:

index.pug

html
  head
    //- require bootstrap styles separate:
    link(href=require('bootstrap/dist/css/bootstrap.min.css') rel='stylesheet')
    //- require your styles separate:
    link(href=require('./styles.scss') rel='stylesheet')
  body
    h1 Hello Pug!
    script(src=require('./main.js'))

styles.scss

//@use "~bootstrap/scss/bootstrap"; // <-- remove to separate file
body {
  color: red;
}

Very important
In this case the optimization.cacheGroups.{cacheGroup}.test must be as /[\\/]node_modules[\\/].+\.js$/, not /[\\/]node_modules[\\/]/.