From f7d07e42e7ceb881db24cbafe40f93e98bd64cff Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 14 Feb 2017 20:51:23 -0500 Subject: [PATCH] Add support for dynamic import & disable require.ensure (#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 --- packages/babel-preset-react-cy-app/index.js | 2 + .../config/webpack.config.dev.js | 2 + .../config/webpack.config.prod.js | 2 + .../fixtures/kitchensink/src/App.js | 50 +++++++++---------- 4 files changed, 31 insertions(+), 25 deletions(-) diff --git a/packages/babel-preset-react-cy-app/index.js b/packages/babel-preset-react-cy-app/index.js index 0348760d3f6..6d3e782f439 100644 --- a/packages/babel-preset-react-cy-app/index.js +++ b/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: diff --git a/packages/react-cy-scripts/config/webpack.config.dev.js b/packages/react-cy-scripts/config/webpack.config.dev.js index 2fc49a58569..a1f3a29fa80 100644 --- a/packages/react-cy-scripts/config/webpack.config.dev.js +++ b/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. diff --git a/packages/react-cy-scripts/config/webpack.config.prod.js b/packages/react-cy-scripts/config/webpack.config.prod.js index bf2fd0a9ebc..32488b5ccba 100644 --- a/packages/react-cy-scripts/config/webpack.config.prod.js +++ b/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. diff --git a/packages/react-cy-scripts/fixtures/kitchensink/src/App.js b/packages/react-cy-scripts/fixtures/kitchensink/src/App.js index 36abe50d87a..587ac5f6f79 100644 --- a/packages/react-cy-scripts/fixtures/kitchensink/src/App.js +++ b/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}"`); }