From 7c089896b928e08fb0b2455287ad8e1fa4acd82a Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sun, 12 Feb 2017 14:18:34 -0500 Subject: [PATCH 1/7] Disable require.ensure --- packages/react-scripts/config/webpack.config.dev.js | 2 ++ packages/react-scripts/config/webpack.config.prod.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index e26a5a25d81..642d73741a8 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/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. { diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 86d87d39211..edf153516e7 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/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. { From adcc6ea892f86515768be6cdbaa003bba5999b91 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sun, 12 Feb 2017 15:17:40 -0500 Subject: [PATCH 2/7] Replace require.ensure with import --- .../fixtures/kitchensink/src/App.js | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js index 36abe50d87a..e78c5b2925f 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/App.js +++ b/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)); break; case 'array-spread': - require.ensure([], () => this.setFeature(require('./features/syntax/ArraySpread').default)); + import('./features/syntax/ArraySpread').then(f => this.setFeature(f)); break; case 'async-await': - require.ensure([], () => this.setFeature(require('./features/syntax/AsyncAwait').default)); + import('./features/syntax/AsyncAwait').then(f => this.setFeature(f)); break; case 'class-properties': - require.ensure([], () => this.setFeature(require('./features/syntax/ClassProperties').default)); + import('./features/syntax/ClassProperties').then(f => this.setFeature(f)); break; case 'computed-properties': - require.ensure([], () => this.setFeature(require('./features/syntax/ComputedProperties').default)); + import('./features/syntax/ComputedProperties').then(f => this.setFeature(f)); break; case 'css-inclusion': - require.ensure([], () => this.setFeature(require('./features/webpack/CssInclusion').default)); + import('./features/webpack/CssInclusion').then(f => this.setFeature(f)); break; case 'custom-interpolation': - require.ensure([], () => this.setFeature(require('./features/syntax/CustomInterpolation').default)); + import('./features/syntax/CustomInterpolation').then(f => this.setFeature(f)); break; case 'default-parameters': - require.ensure([], () => this.setFeature(require('./features/syntax/DefaultParameters').default)); + import('./features/syntax/DefaultParameters').then(f => this.setFeature(f)); break; case 'destructuring-and-await': - require.ensure([], () => this.setFeature(require('./features/syntax/DestructuringAndAwait').default)); + import('./features/syntax/DestructuringAndAwait').then(f => this.setFeature(f)); break; case 'file-env-variables': - require.ensure([], () => this.setFeature(require('./features/env/FileEnvVariables').default)); + import('./features/env/FileEnvVariables').then(f => this.setFeature(f)); break; case 'generators': - require.ensure([], () => this.setFeature(require('./features/syntax/Generators').default)); + import('./features/syntax/Generators').then(f => this.setFeature(f)); break; case 'image-inclusion': - require.ensure([], () => this.setFeature(require('./features/webpack/ImageInclusion').default)); + import('./features/webpack/ImageInclusion').then(f => this.setFeature(f)); break; case 'json-inclusion': - require.ensure([], () => this.setFeature(require('./features/webpack/JsonInclusion').default)); + import('./features/webpack/JsonInclusion').then(f => this.setFeature(f)); break; case 'node-path': - require.ensure([], () => this.setFeature(require('./features/env/NodePath').default)); + import('./features/env/NodePath').then(f => this.setFeature(f)); break; case 'no-ext-inclusion': - require.ensure([], () => this.setFeature(require('./features/webpack/NoExtInclusion').default)); + import('./features/webpack/NoExtInclusion').then(f => this.setFeature(f)); break; case 'object-destructuring': - require.ensure([], () => this.setFeature(require('./features/syntax/ObjectDestructuring').default)); + import('./features/syntax/ObjectDestructuring').then(f => this.setFeature(f)); break; case 'object-spread': - require.ensure([], () => this.setFeature(require('./features/syntax/ObjectSpread').default)); + import('./features/syntax/ObjectSpread').then(f => this.setFeature(f)); break; case 'promises': - require.ensure([], () => this.setFeature(require('./features/syntax/Promises').default)); + import('./features/syntax/Promises').then(f => this.setFeature(f)); break; case 'public-url': - require.ensure([], () => this.setFeature(require('./features/env/PublicUrl').default)); + import('./features/env/PublicUrl').then(f => this.setFeature(f)); break; case 'rest-and-default': - require.ensure([], () => this.setFeature(require('./features/syntax/RestAndDefault').default)); + import('./features/syntax/RestAndDefault').then(f => this.setFeature(f)); break; case 'rest-parameters': - require.ensure([], () => this.setFeature(require('./features/syntax/RestParameters').default)); + import('./features/syntax/RestParameters').then(f => this.setFeature(f)); break; case 'shell-env-variables': - require.ensure([], () => this.setFeature(require('./features/env/ShellEnvVariables').default)); + import('./features/env/ShellEnvVariables').then(f => this.setFeature(f)); break; case 'svg-inclusion': - require.ensure([], () => this.setFeature(require('./features/webpack/SvgInclusion').default)); + import('./features/webpack/SvgInclusion').then(f => this.setFeature(f)); break; case 'template-interpolation': - require.ensure([], () => this.setFeature(require('./features/syntax/TemplateInterpolation').default)); + import('./features/syntax/TemplateInterpolation').then(f => this.setFeature(f)); break; case 'unknown-ext-inclusion': - require.ensure([], () => this.setFeature(require('./features/webpack/UnknownExtInclusion').default)); + import('./features/webpack/UnknownExtInclusion').then(f => this.setFeature(f)); break; default: throw new Error(`Missing feature "${feature}"`); } From 0055e79829e25506c121cabe6a0423cbc11b8664 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sun, 12 Feb 2017 15:58:32 -0500 Subject: [PATCH 3/7] Add babel plugin for parsing import() --- packages/babel-preset-react-app/index.js | 4 +++- packages/babel-preset-react-app/package.json | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 8a42f885e31..1204e05e6cb 100644 --- a/packages/babel-preset-react-app/index.js +++ b/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: diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index ae5ab93be65..f281ebc5865 100644 --- a/packages/babel-preset-react-app/package.json +++ b/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", From 658ce801e6dc6e0d5b1537742fa289667a991606 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sun, 12 Feb 2017 15:58:54 -0500 Subject: [PATCH 4/7] Get the default --- .../fixtures/kitchensink/src/App.js | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js index e78c5b2925f..587ac5f6f79 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/App.js +++ b/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': - import('./features/syntax/ArrayDestructuring').then(f => this.setFeature(f)); + import('./features/syntax/ArrayDestructuring').then(f => this.setFeature(f.default)); break; case 'array-spread': - import('./features/syntax/ArraySpread').then(f => this.setFeature(f)); + import('./features/syntax/ArraySpread').then(f => this.setFeature(f.default)); break; case 'async-await': - import('./features/syntax/AsyncAwait').then(f => this.setFeature(f)); + import('./features/syntax/AsyncAwait').then(f => this.setFeature(f.default)); break; case 'class-properties': - import('./features/syntax/ClassProperties').then(f => this.setFeature(f)); + import('./features/syntax/ClassProperties').then(f => this.setFeature(f.default)); break; case 'computed-properties': - import('./features/syntax/ComputedProperties').then(f => this.setFeature(f)); + import('./features/syntax/ComputedProperties').then(f => this.setFeature(f.default)); break; case 'css-inclusion': - import('./features/webpack/CssInclusion').then(f => this.setFeature(f)); + import('./features/webpack/CssInclusion').then(f => this.setFeature(f.default)); break; case 'custom-interpolation': - import('./features/syntax/CustomInterpolation').then(f => this.setFeature(f)); + import('./features/syntax/CustomInterpolation').then(f => this.setFeature(f.default)); break; case 'default-parameters': - import('./features/syntax/DefaultParameters').then(f => this.setFeature(f)); + import('./features/syntax/DefaultParameters').then(f => this.setFeature(f.default)); break; case 'destructuring-and-await': - import('./features/syntax/DestructuringAndAwait').then(f => this.setFeature(f)); + import('./features/syntax/DestructuringAndAwait').then(f => this.setFeature(f.default)); break; case 'file-env-variables': - import('./features/env/FileEnvVariables').then(f => this.setFeature(f)); + import('./features/env/FileEnvVariables').then(f => this.setFeature(f.default)); break; case 'generators': - import('./features/syntax/Generators').then(f => this.setFeature(f)); + import('./features/syntax/Generators').then(f => this.setFeature(f.default)); break; case 'image-inclusion': - import('./features/webpack/ImageInclusion').then(f => this.setFeature(f)); + import('./features/webpack/ImageInclusion').then(f => this.setFeature(f.default)); break; case 'json-inclusion': - import('./features/webpack/JsonInclusion').then(f => this.setFeature(f)); + import('./features/webpack/JsonInclusion').then(f => this.setFeature(f.default)); break; case 'node-path': - import('./features/env/NodePath').then(f => this.setFeature(f)); + import('./features/env/NodePath').then(f => this.setFeature(f.default)); break; case 'no-ext-inclusion': - import('./features/webpack/NoExtInclusion').then(f => this.setFeature(f)); + import('./features/webpack/NoExtInclusion').then(f => this.setFeature(f.default)); break; case 'object-destructuring': - import('./features/syntax/ObjectDestructuring').then(f => this.setFeature(f)); + import('./features/syntax/ObjectDestructuring').then(f => this.setFeature(f.default)); break; case 'object-spread': - import('./features/syntax/ObjectSpread').then(f => this.setFeature(f)); + import('./features/syntax/ObjectSpread').then(f => this.setFeature(f.default)); break; case 'promises': - import('./features/syntax/Promises').then(f => this.setFeature(f)); + import('./features/syntax/Promises').then(f => this.setFeature(f.default)); break; case 'public-url': - import('./features/env/PublicUrl').then(f => this.setFeature(f)); + import('./features/env/PublicUrl').then(f => this.setFeature(f.default)); break; case 'rest-and-default': - import('./features/syntax/RestAndDefault').then(f => this.setFeature(f)); + import('./features/syntax/RestAndDefault').then(f => this.setFeature(f.default)); break; case 'rest-parameters': - import('./features/syntax/RestParameters').then(f => this.setFeature(f)); + import('./features/syntax/RestParameters').then(f => this.setFeature(f.default)); break; case 'shell-env-variables': - import('./features/env/ShellEnvVariables').then(f => this.setFeature(f)); + import('./features/env/ShellEnvVariables').then(f => this.setFeature(f.default)); break; case 'svg-inclusion': - import('./features/webpack/SvgInclusion').then(f => this.setFeature(f)); + import('./features/webpack/SvgInclusion').then(f => this.setFeature(f.default)); break; case 'template-interpolation': - import('./features/syntax/TemplateInterpolation').then(f => this.setFeature(f)); + import('./features/syntax/TemplateInterpolation').then(f => this.setFeature(f.default)); break; case 'unknown-ext-inclusion': - import('./features/webpack/UnknownExtInclusion').then(f => this.setFeature(f)); + import('./features/webpack/UnknownExtInclusion').then(f => this.setFeature(f.default)); break; default: throw new Error(`Missing feature "${feature}"`); } From a44f50da0b3b46eafa3368b5f313621c301a4509 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sun, 12 Feb 2017 16:19:18 -0500 Subject: [PATCH 5/7] Upgrade babel-eslint to support dynamic import --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a9262568d25..dd5ad94134e 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "test": "node packages/react-scripts/scripts/test.js --env=jsdom" }, "devDependencies": { - "babel-eslint": "6.1.2", + "babel-eslint": "7.1.0", "eslint": "3.5.0", "eslint-config-react-app": "0.2.1", "eslint-plugin-flowtype": "2.18.1", From e5ab8373e46bdacfc617c1f0ffe44d263315d0ea Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sun, 12 Feb 2017 17:00:55 -0500 Subject: [PATCH 6/7] Fix dep --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dd5ad94134e..807d9c6d657 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "devDependencies": { "babel-eslint": "7.1.0", "eslint": "3.5.0", - "eslint-config-react-app": "0.2.1", + "eslint-config-react-app": "0.5.1", "eslint-plugin-flowtype": "2.18.1", "eslint-plugin-import": "1.12.0", "eslint-plugin-jsx-a11y": "2.2.2", From 020b8f98959616302a0535e444fe0b19de9f41c7 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sun, 12 Feb 2017 17:07:11 -0500 Subject: [PATCH 7/7] Update deps --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 807d9c6d657..63f413e4d6d 100644 --- a/package.json +++ b/package.json @@ -12,12 +12,12 @@ }, "devDependencies": { "babel-eslint": "7.1.0", - "eslint": "3.5.0", + "eslint": "3.8.1", "eslint-config-react-app": "0.5.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", + "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" }