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);
+ });
});
});
});