diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index d0e1007f2e2..3760ec4e1ae 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -30,9 +30,7 @@ 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: @@ -77,7 +75,10 @@ if (env === 'test') { // JSX, Flow require.resolve('babel-preset-react') ], - plugins: plugins + plugins: plugins.concat([ + // Compiles import() to a deferred require() + require.resolve('babel-plugin-dynamic-import-node') + ]) }; } else { module.exports = { @@ -97,6 +98,8 @@ if (env === 'test') { // Async functions are converted to generators by babel-preset-latest async: false }], + // Adds syntax support for import() + require.resolve('babel-plugin-syntax-dynamic-import'), ]) }; diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 92de2d3a31a..3883516e56a 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-dynamic-import-node": "1.0.0", "babel-plugin-syntax-dynamic-import": "6.18.0", "babel-plugin-transform-class-properties": "6.22.0", "babel-plugin-transform-object-rest-spread": "6.22.0", diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js index 36c5984a4b5..3783cca0a54 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js @@ -1,12 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import Promises from './Promises'; describe('promises', () => { it('renders without crashing', () => { const div = document.createElement('div'); - return new Promise(resolve => { - ReactDOM.render(, div); + return import('./Promises').then(({ default: Promises }) => { + return new Promise(resolve => { + ReactDOM.render(, div); + }); }); }); });