Turn on Babel helpers

packages/babel-preset-react-app/create.js

@@ -6,17 +6,7 @@
  */
 'use strict';
 
-const validateBoolOption = (name, value, defaultValue) => {
-  if (typeof value === 'undefined') {
-    value = defaultValue;
-  }
-
-  if (typeof value !== 'boolean') {
-    throw new Error(`Preset react-app: '${name}' option must be a boolean.`);
-  }
-
-  return value;
-};
+const { validateBoolOption } = require('./utils');
 
 module.exports = function(api, opts, env) {
   if (!opts) {
@@ -27,6 +17,7 @@ module.exports = function(api, opts, env) {
   var isEnvProduction = env === 'production';
   var isEnvTest = env === 'test';
   var isFlowEnabled = validateBoolOption('flow', opts.flow, true);
+  var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, true);
 
   if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
     throw new Error(
@@ -113,7 +104,7 @@ module.exports = function(api, opts, env) {
         require('@babel/plugin-transform-runtime').default,
         {
           corejs: false,
-          helpers: false,
+          helpers: areHelpersEnabled,
           regenerator: true,
           // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
           // We should turn this on once the lowest version of Node LTS

packages/babel-preset-react-app/dependencies.js

@@ -6,6 +6,8 @@
  */
 'use strict';
 
+const { validateBoolOption } = require('./utils');
+
 module.exports = function(api, opts) {
   if (!opts) {
     opts = {};
@@ -21,6 +23,7 @@ module.exports = function(api, opts) {
   var isEnvDevelopment = env === 'development';
   var isEnvProduction = env === 'production';
   var isEnvTest = env === 'test';
+  var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, false);
   if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
     throw new Error(
       'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
@@ -76,7 +79,7 @@ module.exports = function(api, opts) {
         require('@babel/plugin-transform-runtime').default,
         {
           corejs: false,
-          helpers: false,
+          helpers: areHelpersEnabled,
           regenerator: true,
           // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules
           // We should turn this on once the lowest version of Node LTS

packages/babel-preset-react-app/package.json

@@ -15,7 +15,8 @@
     "loader.js",
     "overrides.js",
     "prod.js",
-    "test.js"
+    "test.js",
+    "utils.js"
   ],
   "dependencies": {
     "@babel/core": "7.1.0",

packages/babel-preset-react-app/utils.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+const validateBoolOption = (name, value, defaultValue) => {
+  if (typeof value === 'undefined') {
+    value = defaultValue;
+  }
+
+  if (typeof value !== 'boolean') {
+    throw new Error(`Preset react-app: '${name}' option must be a boolean.`);
+  }
+
+  return value;
+};
+
+module.exports = { validateBoolOption };

packages/react-error-overlay/webpack.config.iframe.js

@@ -32,12 +32,15 @@ module.exports = {
           // Dependencies
           {
             test: /\.js$/,
+            exclude: /@babel\/runtime/,
             use: {
               loader: 'babel-loader',
               options: {
                 babelrc: false,
                 compact: false,
-                presets: ['babel-preset-react-app/dependencies'],
+                presets: [
+                  ['babel-preset-react-app/dependencies', { helpers: true }],
+                ],
               },
             },
           },

packages/react-scripts/config/webpack.config.dev.js

@@ -275,6 +275,7 @@ module.exports = {
           // Unlike the application JS, we only compile the standard ES features.
           {
             test: /\.js$/,
+            exclude: /@babel\/runtime/,
             use: [
               // This loader parallelizes code compilation, it is optional but
               // improves compile time on larger projects
@@ -290,7 +291,10 @@ module.exports = {
                   babelrc: false,
                   compact: false,
                   presets: [
-                    require.resolve('babel-preset-react-app/dependencies'),
+                    [
+                      require.resolve('babel-preset-react-app/dependencies'),
+                      { helpers: true },
+                    ],
                   ],
                   cacheDirectory: true,
                   // Don't waste time on Gzipping the cache

packages/react-scripts/config/webpack.config.prod.js

@@ -314,6 +314,7 @@ module.exports = {
           // Unlike the application JS, we only compile the standard ES features.
           {
             test: /\.js$/,
+            exclude: /@babel\/runtime/,
             use: [
               // This loader parallelizes code compilation, it is optional but
               // improves compile time on larger projects
@@ -324,7 +325,10 @@ module.exports = {
                   babelrc: false,
                   compact: false,
                   presets: [
-                    require.resolve('babel-preset-react-app/dependencies'),
+                    [
+                      require.resolve('babel-preset-react-app/dependencies'),
+                      { helpers: true },
+                    ],
                   ],
                   cacheDirectory: true,
                   // Save disk space when time isn't as important

packages/react-scripts/fixtures/kitchensink/.template.dependencies.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "bootstrap": "4.1.1",
     "jest": "23.6.0",
+    "ky": "0.3.0",
     "node-sass": "4.8.3",
     "normalize.css": "7.0.0",
     "prop-types": "15.5.6",

packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js

@@ -90,6 +90,15 @@ describe('Integration', () => {
       doc.defaultView.close();
     });
 
+    it('babel node modules', async () => {
+      const doc = await initDOM('babel-node-modules');
+
+      expect(
+        doc.getElementById('feature-babel-node-modules').childElementCount
+      ).toBe(1);
+      doc.defaultView.close();
+    });
+
     it('object destructuring', async () => {
       const doc = await initDOM('object-destructuring');
 

packages/react-scripts/fixtures/kitchensink/src/App.js

@@ -134,6 +134,11 @@ class App extends Component {
           this.setFeature(f.default)
         );
         break;
+      case 'babel-node-modules':
+        import('./features/syntax/NodeModulesCompilation').then(f =>
+          this.setFeature(f.default)
+        );
+        break;
       case 'image-inclusion':
         import('./features/webpack/ImageInclusion').then(f =>
           this.setFeature(f.default)

packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ky from 'ky';
+
+export default class extends Component {
+  static propTypes = {
+    onReady: PropTypes.func.isRequired,
+  };
+
+  state = { ip: null };
+
+  async componentDidMount() {
+    const ip = await ky.get('https://canihazip.com/s').text();
+    this.setState({ ip });
+  }
+
+  componentDidUpdate() {
+    this.props.onReady();
+  }
+
+  render() {
+    return (
+      <div id="feature-babel-node-modules">
+        {this.state.ip ? <span>{this.state.ip}</span> : null}
+      </div>
+    );
+  }
+}

packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.test.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+describe('node_modules compile', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    return import('./NodeModulesCompilation').then(
+      ({ default: NodeModulesCompilation }) => {
+        return new Promise(resolve => {
+          ReactDOM.render(<NodeModulesCompilation onReady={resolve} />, div);
+        });
+      }
+    );
+  });
+});