From fa22daf3ed30953deba662cc2f86ac8651da8eb2 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 23 Sep 2016 16:53:22 +0100 Subject: [PATCH] Add JSX source transform for better warnings (#716) Fixes #700. Read about it here: https://twitter.com/dan_abramov/status/779308833399332864. --- packages/babel-preset-react-app/index.js | 50 ++++++++++++++------ packages/babel-preset-react-app/package.json | 2 + 2 files changed, 38 insertions(+), 14 deletions(-) diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index ec29dc40f2e..34e9efabb72 100644 --- 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 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",