Add JSX source transform for better warnings

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

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js
@@ -35,18 +35,40 @@ module.exports = {
       // Resolve the Babel runtime relative to the config.
       moduleName: path.dirname(require.resolve('babel-runtime/package'))
     }]
-  ],
-  env: {
-    production: {
-      plugins: [
-        // Optimization: hoist JSX that never changes out of render()
-        // Disabled because of issues:
-        // * https://github.com/facebookincubator/create-react-app/issues/525
-        // * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/
-        // * https://github.com/babel/babel/issues/4516
-        // TODO: Enable again when these issues are resolved.
-        // require.resolve('babel-plugin-transform-react-constant-elements')
-      ]
-    }
-  }
+  ]
 };
+
+// This is similar to how `env` works in Babel:
+// https://babeljs.io/docs/usage/babelrc/#env-option
+// We are not using `env` because it’s ignored in versions > babel-core@6.10.4:
+// https://github.com/babel/babel/issues/4539
+// https://github.com/facebookincubator/create-react-app/issues/720
+// It’s also nice that we can enforce `NODE_ENV` being specified.
+var env = process.env.BABEL_ENV || process.env.NODE_ENV;
+if (env !== 'development' && env !== 'test' && env !== 'production') {
+  throw new Error(
+    'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or '+
+    '`BABEL_ENV` environment variables. Valid values are "development", ' +
+    '"test", and "production". Instead, received: ' + JSON.stringify(env) + '.'
+  );
+}
+var plugins = module.exports.plugins;
+if (env === 'development' || env === 'test') {
+  plugins.push.apply(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')
+  ]);
+}
+if (env === 'production') {
+  // Optimization: hoist JSX that never changes out of render()
+  // Disabled because of issues:
+  // * https://github.com/facebookincubator/create-react-app/issues/525
+  // * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/
+  // * https://github.com/babel/babel/issues/4516
+  // TODO: Enable again when these issues are resolved.
+  // plugins.push.apply(plugins, [
+  //   require.resolve('babel-plugin-transform-react-constant-elements')
+  // ]);
+}
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",