Add support for dynamic import & disable require.ensure

package.json

@@ -11,13 +11,13 @@
  "test": "node packages/react-scripts/scripts/test.js --env=jsdom"
  },
  "devDependencies": {
- "babel-eslint": "6.1.2",
- "eslint": "3.5.0",
- "eslint-config-react-app": "0.2.1",
- "eslint-plugin-flowtype": "2.18.1",
- "eslint-plugin-import": "1.12.0",
- "eslint-plugin-jsx-a11y": "2.2.2",
- "eslint-plugin-react": "6.3.0",
+ "babel-eslint": "7.1.0",
+ "eslint": "3.8.1",
+ "eslint-config-react-app": "0.5.1",
+ "eslint-plugin-flowtype": "2.21.0",
+ "eslint-plugin-import": "2.0.1",
+ "eslint-plugin-jsx-a11y": "2.2.3",
+ "eslint-plugin-react": "6.4.1",
  "lerna": "^2.0.0-beta.37",
  "lerna-changelog": "^0.2.3"
  }

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

@@ -30,7 +30,9 @@ const plugins = [
  regenerator: true,
  // Resolve the Babel runtime relative to the config.
  moduleName: path.dirname(require.resolve('babel-runtime/package'))
- }]
+ }],
+ // Enables parsing of import()
+ require.resolve('babel-plugin-syntax-dynamic-import')
 ];
 
 // This is similar to how `env` works in Babel:

packages/babel-preset-react-app/package.json

@@ -11,6 +11,7 @@
  "index.js"
  ],
  "dependencies": {
+ "babel-plugin-syntax-dynamic-import": "6.18.0",
  "babel-plugin-transform-class-properties": "6.22.0",
  "babel-plugin-transform-es2015-parameters": "6.22.0",
  "babel-plugin-transform-object-rest-spread": "6.22.0",

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

@@ -106,6 +106,8 @@ module.exports = {
  // @remove-on-eject-end
  module: {
  rules: [
+ // Disable require.ensure as it's not a standard language feature.
+ { parser: { requireEnsure: false } },
  // First, run the linter.
  // It's important to do this before Babel processes the JS.
  {

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

@@ -111,6 +111,8 @@ module.exports = {
  // @remove-on-eject-end
  module: {
  rules: [
+ // Disable require.ensure as it's not a standard language feature.
+ { parser: { requireEnsure: false } },
  // First, run the linter.
  // It's important to do this before Babel processes the JS.
  {

packages/react-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}"`);
  }