Add JSX source transform for better warnings

Fixes #700. Read about it here: https://twitter.com/dan_abramov/status/779308833399332864.
facebook · Sep 23, 2016 · 579309f · 579309f
1 parent 92afcaf
commit 579309f
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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