Doesn't work with CommonChunksPlugin using `async` option

[tswaters]

Can't seem to get this method to work with the CommonChunksPlugin using the async option. It always includes the results of the common.js file in each of the chunk files.

You can see yourself by applying the following diff to this project. With this change I'm expecting to see a common.js file emmitted with a chunk name of "common", but it's not showing up.

Maybe CommonChunksPlugin is getting confused by the NormalModuleReplacementPlugin ?

diff --git a/routes/Dashboard.js b/routes/Dashboard.js
index 0a735d7..7327e60 100644
--- a/routes/Dashboard.js
+++ b/routes/Dashboard.js
@@ -2,6 +2,9 @@ import React from 'react';
 import {Link} from 'react-router-dom';
 import {renderRoutes} from 'react-router-config'
 
+import hello from './common.js'
+hello()
+
 
 function Dashboard(props) {
   const {route} = props;
diff --git a/routes/Landing.js b/routes/Landing.js
index 2ee0539..5c87006 100644
--- a/routes/Landing.js
+++ b/routes/Landing.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import {Link} from 'react-router-dom';
 
+import hello from './common.js'
+hello()
+
 function Landing() {
   return (
     <div>
diff --git a/routes/NestedRoute.js b/routes/NestedRoute.js
index ecd597c..fec6c3b 100644
--- a/routes/NestedRoute.js
+++ b/routes/NestedRoute.js
@@ -1,6 +1,9 @@
 import React from 'react';
 import {Link} from 'react-router-dom';
 
+import hello from './common.js'
+hello()
+
 function NestedRoute() {
   return (
     <div>
diff --git a/routes/common.js b/routes/common.js
new file mode 100644
index 0000000..f2cccdf
--- /dev/null
+++ b/routes/common.js
@@ -0,0 +1,5 @@
+
+export default () => {
+  console.log('hello')
+}
+
diff --git a/webpack.config.js b/webpack.config.js
index 07d5a00..5169a9e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -19,6 +19,11 @@ const clientConfig = {
   },
   plugins: [
     // ...
+    new webpack.optimize.CommonsChunkPlugin({
+      async: 'common',
+      children: true,
+      minChunks: 2
+    }),
     new webpack.NormalModuleReplacementPlugin(
       /Bundles.js/,
       './AsyncBundles.js'

[emilecantin]

Yeah, I had a hard time with CommonsChunkPlugin too... The way I have it setup currently is that I only have a common vendor chunk, as my code duplication wasn't that bad elsewhere. I'll try to take a deeper look at it tonight.

[s123121]

@tswaters echo on this problem, do you find any workaround yet?

[tswaters]

with react-router, I haven't seen any good solution yet. So, choose 2:

• [ ] common chunks
• [ ] code splitting
• [ ] server-side rendering