fixes webpack2 lazy loading with syntax-dynamic-import

Author: tseho

packages/react-scripts/config/webpack.config.dev.js

@@ -157,6 +157,7 @@ module.exports = {
           // @remove-on-eject-begin
           babelrc: false,
           presets: [require.resolve('babel-preset-react-app')],
+          plugins: ['syntax-dynamic-import'],
           // @remove-on-eject-end
           // This is a feature of `babel-loader` for webpack (not Babel itself).
           // It enables caching results in ./node_modules/.cache/babel-loader/

packages/react-scripts/config/webpack.config.prod.js

@@ -164,6 +164,7 @@ module.exports = {
         options: {
           babelrc: false,
           presets: [require.resolve('babel-preset-react-app')],
+          plugins: ['syntax-dynamic-import'],
         },
         // @remove-on-eject-end
       },

packages/react-scripts/package.json

@@ -28,6 +28,7 @@
     "babel-eslint": "7.1.1",
     "babel-jest": "18.0.0",
     "babel-loader": "6.3.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-react-app": "^2.1.1",
     "babel-runtime": "^6.20.0",
     "case-sensitive-paths-webpack-plugin": "1.1.4",

packages/react-scripts/template/src/routes/About/index.js

@@ -1,9 +1,10 @@
 export default (store) => ({
     path: '/about',
     getComponent (nextState, cb) {
-        require.ensure([], (require) => {
-            const About = require('./containers/AboutContainer').default
-            cb(null, About)
-        }, 'about')
+        import('./containers/AboutContainer').then((About) => {
+            cb(null, About.default)
+        }).catch((err) => {
+            console.error('Failed to load module', err)
+        })
     }
 })