Support & test import() for non-bundled code (#1615)

* Test basic import syntax

* Compile import() in test, only support syntax otherwise

Author: Timer

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'),
     ])
   };
 

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",

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(<Promises onReady={resolve} />, div);
+    return import('./Promises').then(({ default: Promises }) => {
+      return new Promise(resolve => {
+        ReactDOM.render(<Promises onReady={resolve} />, div);
+      });
     });
   });
 });