Add support for dynamic import & disable require.ensure (facebook#1538)

* Disable require.ensure

* Replace require.ensure with import

* Add babel plugin for parsing import()

* Get the default

* Upgrade babel-eslint to support dynamic import

* Fix dep

* Update deps

# Conflicts:
#	package.json
#	packages/babel-preset-react-app/package.json
#	packages/babel-preset-react-cy-app/index.js
#	packages/react-cy-scripts/config/webpack.config.dev.js
#	packages/react-cy-scripts/config/webpack.config.prod.js

Author: Timer

packages/babel-preset-react-cy-app/index.js

@@ -26,6 +26,8 @@ const plugins = [
   [require.resolve('babel-plugin-transform-react-jsx'), {
     useBuiltIns: true
   }],
+  // Enables parsing of import()
+  require.resolve('babel-plugin-syntax-dynamic-import')
 ];
 
 // This is similar to how `env` works in Babel:

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

@@ -96,6 +96,8 @@ module.exports = {
   // @remove-on-eject-end
   module: {
     rules: [
+      // Disable require.ensure as it's not a standard language feature.
+      { parser: { requireEnsure: false } },
       // ** ADDING/UPDATING LOADERS **
       // The "url" loader handles all assets unless explicitly excluded.
       // The `exclude` list *must* be updated with every change to loader extensions.

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

@@ -100,6 +100,8 @@ module.exports = {
   // @remove-on-eject-end
   module: {
     rules: [
+      // Disable require.ensure as it's not a standard language feature.
+      { parser: { requireEnsure: false } },
       // ** ADDING/UPDATING LOADERS **
       // The "url" loader handles all assets unless explicitly excluded.
       // The `exclude` list *must* be updated with every change to loader extensions.

packages/react-cy-scripts/fixtures/kitchensink/src/App.js

@@ -47,79 +47,79 @@ class App extends Component {
     const feature = location.hash.slice(1);
     switch (feature) {
       case 'array-destructuring':
-        require.ensure([], () => this.setFeature(require('./features/syntax/ArrayDestructuring').default));
+        import('./features/syntax/ArrayDestructuring').then(f => this.setFeature(f.default));
         break;
       case 'array-spread':
-        require.ensure([], () => this.setFeature(require('./features/syntax/ArraySpread').default));
+        import('./features/syntax/ArraySpread').then(f => this.setFeature(f.default));
         break;
       case 'async-await':
-        require.ensure([], () => this.setFeature(require('./features/syntax/AsyncAwait').default));
+        import('./features/syntax/AsyncAwait').then(f => this.setFeature(f.default));
         break;
       case 'class-properties':
-        require.ensure([], () => this.setFeature(require('./features/syntax/ClassProperties').default));
+        import('./features/syntax/ClassProperties').then(f => this.setFeature(f.default));
         break;
       case 'computed-properties':
-        require.ensure([], () => this.setFeature(require('./features/syntax/ComputedProperties').default));
+        import('./features/syntax/ComputedProperties').then(f => this.setFeature(f.default));
         break;
       case 'css-inclusion':
-        require.ensure([], () => this.setFeature(require('./features/webpack/CssInclusion').default));
+        import('./features/webpack/CssInclusion').then(f => this.setFeature(f.default));
         break;
       case 'custom-interpolation':
-        require.ensure([], () => this.setFeature(require('./features/syntax/CustomInterpolation').default));
+        import('./features/syntax/CustomInterpolation').then(f => this.setFeature(f.default));
         break;
       case 'default-parameters':
-        require.ensure([], () => this.setFeature(require('./features/syntax/DefaultParameters').default));
+        import('./features/syntax/DefaultParameters').then(f => this.setFeature(f.default));
         break;
       case 'destructuring-and-await':
-        require.ensure([], () => this.setFeature(require('./features/syntax/DestructuringAndAwait').default));
+        import('./features/syntax/DestructuringAndAwait').then(f => this.setFeature(f.default));
         break;
       case 'file-env-variables':
-        require.ensure([], () => this.setFeature(require('./features/env/FileEnvVariables').default));
+        import('./features/env/FileEnvVariables').then(f => this.setFeature(f.default));
         break;
       case 'generators':
-        require.ensure([], () => this.setFeature(require('./features/syntax/Generators').default));
+        import('./features/syntax/Generators').then(f => this.setFeature(f.default));
         break;
       case 'image-inclusion':
-        require.ensure([], () => this.setFeature(require('./features/webpack/ImageInclusion').default));
+        import('./features/webpack/ImageInclusion').then(f => this.setFeature(f.default));
         break;
       case 'json-inclusion':
-        require.ensure([], () => this.setFeature(require('./features/webpack/JsonInclusion').default));
+        import('./features/webpack/JsonInclusion').then(f => this.setFeature(f.default));
         break;
       case 'node-path':
-        require.ensure([], () => this.setFeature(require('./features/env/NodePath').default));
+        import('./features/env/NodePath').then(f => this.setFeature(f.default));
         break;
       case 'no-ext-inclusion':
-        require.ensure([], () => this.setFeature(require('./features/webpack/NoExtInclusion').default));
+        import('./features/webpack/NoExtInclusion').then(f => this.setFeature(f.default));
         break;
       case 'object-destructuring':
-        require.ensure([], () => this.setFeature(require('./features/syntax/ObjectDestructuring').default));
+        import('./features/syntax/ObjectDestructuring').then(f => this.setFeature(f.default));
         break;
       case 'object-spread':
-        require.ensure([], () => this.setFeature(require('./features/syntax/ObjectSpread').default));
+        import('./features/syntax/ObjectSpread').then(f => this.setFeature(f.default));
         break;
       case 'promises':
-        require.ensure([], () => this.setFeature(require('./features/syntax/Promises').default));
+        import('./features/syntax/Promises').then(f => this.setFeature(f.default));
         break;
       case 'public-url':
-        require.ensure([], () => this.setFeature(require('./features/env/PublicUrl').default));
+        import('./features/env/PublicUrl').then(f => this.setFeature(f.default));
         break;
       case 'rest-and-default':
-        require.ensure([], () => this.setFeature(require('./features/syntax/RestAndDefault').default));
+        import('./features/syntax/RestAndDefault').then(f => this.setFeature(f.default));
         break;
       case 'rest-parameters':
-        require.ensure([], () => this.setFeature(require('./features/syntax/RestParameters').default));
+        import('./features/syntax/RestParameters').then(f => this.setFeature(f.default));
         break;
       case 'shell-env-variables':
-        require.ensure([], () => this.setFeature(require('./features/env/ShellEnvVariables').default));
+        import('./features/env/ShellEnvVariables').then(f => this.setFeature(f.default));
         break;
       case 'svg-inclusion':
-        require.ensure([], () => this.setFeature(require('./features/webpack/SvgInclusion').default));
+        import('./features/webpack/SvgInclusion').then(f => this.setFeature(f.default));
         break;
       case 'template-interpolation':
-        require.ensure([], () => this.setFeature(require('./features/syntax/TemplateInterpolation').default));
+        import('./features/syntax/TemplateInterpolation').then(f => this.setFeature(f.default));
         break;
       case 'unknown-ext-inclusion':
-        require.ensure([], () => this.setFeature(require('./features/webpack/UnknownExtInclusion').default));
+        import('./features/webpack/UnknownExtInclusion').then(f => this.setFeature(f.default));
         break;
       default: throw new Error(`Missing feature "${feature}"`);
     }