From 33eeb413d0cc5a4fb80c866154101006c2d43574 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 13 Jan 2018 22:18:28 +0000
Subject: [PATCH] Compile dependencies with babel-preset-env (#3776)

---
 config/webpack.config.dev.js  | 15 ++++++++++++++-
 config/webpack.config.prod.js | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 2c6b364fe55..74651384349 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -159,7 +159,8 @@ module.exports = {
               name: 'static/media/[name].[hash:8].[ext]',
             },
           },
-          // Process JS with Babel.
+          // Process application JS with Babel.
+          // The preset includes JSX, Flow, and some ESnext features.
           {
             test: /\.(js|jsx|mjs)$/,
             include: paths.appSrc,
@@ -175,6 +176,18 @@ module.exports = {
               cacheDirectory: true,
             },
           },
+          // Process any JS outside of the app with Babel.
+          // Unlike the application JS, we only compile the standard ES features.
+          {
+            test: /\.js$/,
+            loader: require.resolve('babel-loader'),
+            options: {
+              babelrc: false,
+              compact: false,
+              presets: [require.resolve('babel-preset-react-app/dependencies')],
+              cacheDirectory: true,
+            },
+          },
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
           // "style" loader turns CSS into JS modules that inject <style> tags.
diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index 0f1fc1c1704..829bcbd6114 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -167,7 +167,8 @@ module.exports = {
               name: 'static/media/[name].[hash:8].[ext]',
             },
           },
-          // Process JS with Babel.
+          // Process application JS with Babel.
+          // The preset includes JSX, Flow, and some ESnext features.
           {
             test: /\.(js|jsx|mjs)$/,
             include: paths.appSrc,
@@ -180,6 +181,18 @@ module.exports = {
               compact: true,
             },
           },
+          // Process any JS outside of the app with Babel.
+          // Unlike the application JS, we only compile the standard ES features.
+          {
+            test: /\.js$/,
+            loader: require.resolve('babel-loader'),
+            options: {
+              babelrc: false,
+              compact: false,
+              presets: [require.resolve('babel-preset-react-app/dependencies')],
+              cacheDirectory: true,
+            },
+          },
           // The notation here is somewhat confusing.
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.