From 579309fe19e663b8846790e0ee2bf069066598ee Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 23 Sep 2016 14:29:19 +0100
Subject: [PATCH] Add JSX source transform for better warnings

Fixes #700.
Read about it here: https://twitter.com/dan_abramov/status/779308833399332864.
---
 packages/babel-preset-react-app/index.js       | 16 ++++++++++++++++
 packages/babel-preset-react-app/package.json   |  2 ++
 .../react-scripts/config/jest/transform.js     |  8 +++++---
 .../react-scripts/config/webpack.config.dev.js | 14 ++++++++++----
 .../config/webpack.config.prod.js              | 18 +++++++++++-------
 5 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js
index ec29dc40f2e..ac65eb1f38c 100644
--- a/packages/babel-preset-react-app/index.js
+++ b/packages/babel-preset-react-app/index.js
@@ -37,6 +37,22 @@ module.exports = {
     }]
   ],
   env: {
+    development: {
+      plugins: [
+        // Adds component stack to warning messages
+        require.resolve('babel-plugin-transform-react-jsx-source'),
+        // Adds __self attribute to JSX which React will use for some warnings
+        require.resolve('babel-plugin-transform-react-jsx-self')
+      ]
+    },
+    test: {
+      plugins: [
+        // Adds component stack to warning messages
+        require.resolve('babel-plugin-transform-react-jsx-source'),
+        // Adds __self attribute to JSX which React will use for some warnings
+        require.resolve('babel-plugin-transform-react-jsx-self')
+      ]
+    },
     production: {
       plugins: [
         // Optimization: hoist JSX that never changes out of render()
diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json
index fda5b8a1199..a337abf3c0b 100644
--- a/packages/babel-preset-react-app/package.json
+++ b/packages/babel-preset-react-app/package.json
@@ -14,6 +14,8 @@
     "babel-plugin-transform-class-properties": "6.11.5",
     "babel-plugin-transform-object-rest-spread": "6.8.0",
     "babel-plugin-transform-react-constant-elements": "6.9.1",
+    "babel-plugin-transform-react-jsx-self": "6.11.0",
+    "babel-plugin-transform-react-jsx-source": "6.9.0",
     "babel-plugin-transform-regenerator": "6.14.0",
     "babel-plugin-transform-runtime": "6.15.0",
     "babel-preset-latest": "6.14.0",
diff --git a/packages/react-scripts/config/jest/transform.js b/packages/react-scripts/config/jest/transform.js
index 11a0149f97d..2437f0aefd4 100644
--- a/packages/react-scripts/config/jest/transform.js
+++ b/packages/react-scripts/config/jest/transform.js
@@ -8,6 +8,8 @@
 
 const babelJest = require('babel-jest');
 
-module.exports = babelJest.createTransformer({
-  presets: [require.resolve('babel-preset-react-app')]
-});
+module.exports = babelJest.createTransformer(
+  // We embed the preset instead of referring to it because otherwise
+  // `env` options in the preset do not get taken into account.
+  require('babel-preset-react-app')
+);
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index d2d4009ac99..3ec1b4d3c8d 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -121,10 +121,6 @@ module.exports = {
         include: paths.appSrc,
         loader: 'babel',
         query: {
-          // @remove-on-eject-begin
-          babelrc: false,
-          presets: [require.resolve('babel-preset-react-app')],
-          // @remove-on-eject-end
           // This is a feature of `babel-loader` for webpack (not Babel itself).
           // It enables caching results in ./node_modules/.cache/react-scripts/
           // directory for faster rebuilds. We use findCacheDir() because of:
@@ -226,3 +222,13 @@ module.exports = {
     tls: 'empty'
   }
 };
+
+// @remove-on-eject-begin
+// Override babel-loader options to not read .babelrc.
+var babelLoader = module.exports.module.loaders.find(l => l.loader === 'babel');
+babelLoader.query = babelLoader.query || {};
+babelLoader.query.babelrc = false;
+// We embed the preset instead of referring to it because otherwise
+// `env` options in the preset do not get taken into account.
+Object.assign(babelLoader.query, require('babel-preset-react-app'));
+// @remove-on-eject-end
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index a1e3e831bc9..c335db5755e 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -119,13 +119,7 @@ module.exports = {
       {
         test: /\.(js|jsx)$/,
         include: paths.appSrc,
-        loader: 'babel',
-        // @remove-on-eject-begin
-        query: {
-          babelrc: false,
-          presets: [require.resolve('babel-preset-react-app')],
-        },
-        // @remove-on-eject-end
+        loader: 'babel'
       },
       // The notation here is somewhat confusing.
       // "postcss" loader applies autoprefixer to our CSS.
@@ -260,3 +254,13 @@ module.exports = {
     tls: 'empty'
   }
 };
+
+// @remove-on-eject-begin
+// Override babel-loader options to not read .babelrc.
+var babelLoader = module.exports.module.loaders.find(l => l.loader === 'babel');
+babelLoader.query = babelLoader.query || {};
+babelLoader.query.babelrc = false;
+// We embed the preset instead of referring to it because otherwise
+// `env` options in the preset do not get taken into account.
+Object.assign(babelLoader.query, require('babel-preset-react-app'));
+// @remove-on-eject-end