In my react application, I am using react-addons-css-transition-group node module. In the prod build, webpack (5.36.2) is clubbing this module in multiple chunks and not with the vendor even though I have defined vendor splitChunks cacheGroup config as node_modules folder.

vendor: /[\\/]node_modules[\\/]/,

splitChunks: {
  name: false,
  cacheGroups: {
    commons:  {
      test: {
        vendor: /[\\/]node_modules[\\/]/,
      },
      name: 'vendor',
      chunks: 'initial'
    },
    default: {
      minChunks: 2,
      reuseExistingChunk: true,
      minSize: 100000
    }
  }
}

My question is why isn't webpack making a single chunk for this module so it can be loaded in all pages making use of it?

Also sometimes it clubs this module with components that are not needed in a particular page but get loaded through the chunk because of the node module. How should we deal with this?

PS: my vendor is 86kB gzip currently and some npm modules are clubbed in other chunks with my source code. My problem is not specific to react-addons-css-transition-group. Its happening for lot of other modules too.

Bug report

What is the current behavior?

It is not adding a node module in one chunk only and replicating in multiple? Sometimes it clubs it with code that is only required in page B lets say but gets loaded in page A because of reference to the node module.

What is the expected behavior?

Ideally webpack should put all node modules in vendor bundle as specified in config. But since its not putting every node module there I suspect it might be due to already heavy size of vendor 86kb GZIP and hence remaining node modules are being clubbed in other chunks. But chunking is not logical as it should prevent clubbing modules with source code that is specific to a particular page and could accidentally ship to other pages too due to this.

Other relevant information:
webpack version: 5.36.2
Node.js version: 12.18.3
Operating System: Mac OS
Additional tools: