Webpack - React Router V4 - code-stripping duplicate modules in asynchronous chunks

The main problem is that when splitting the code with react-routerV4 and then webpack 2, I have modules that are in multiple chunks that I cannot get in the main one.

My configuration is like this:

• Webpack 2.2.1
• React-route 4.1.1

I am using code splitting as in react-router v4 file

Basically, I don't use imports, but in my route config I have something like this:

import loadHome from 'bundle-loader?lazy&name=home-chunk!./pages/market/Home';
[
  {
    path: url1,
    component: props => <Bundle load={loadHome}>{Home => <Home {...props} />}</Bundle>,
    exact: true,
  },
  // other routes
  ]

      

        
        
        
      

    

This works great with code splitting and I end up with a package for each route and another package for node_modules that I can then split.

My problem is that I have one node_module (react-slick) that is in multiple packages. So I want to get it in the main kit.

My webpack config:

module.exports = {
  entry: [
    'whatwg-fetch',
    './src/scripts/index.js',
  ],
  output: {
    path: path.resolve(__dirname, 'src/build'),
    publicPath: '/build/',
    chunkFilename: "[name].js?[hash]",
    filename: '[name].js',
  },
  plugins: [
    new BundleAnalyzerPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': '"production"'
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['4_node-modules'],
      minChunks(module) {
       const context = module.context;
       return context && context.indexOf('node_modules') >= 0;
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['3_react'],
      chunks: ['4_node-modules'],
      minChunks(module) {
        return module.context && /.*\/react.*/.test(module.context);
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
        children: true,
        minChunks: 2,
    }),
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true,
    }),
    new HtmlWebpackPlugin({
      filename: '../index.prod.html',
      template: 'src/template.index.prod.html',
      inject: false,
      hash: true,
    }),
  ],
};

      

        
        
        
      

    

According to the documentation, this should do the trick:

new webpack.optimize.CommonsChunkPlugin({
    children: true,
    minChunks: 2,
}),

      

        
        
        
      

    

But nothing happens, I still have "reaction spots" in my 3 bundles.

Does anyone have a hint of what's going on?

Any help is appreciated :) Thanks!