diff --git a/packages/babel-preset-react-app/README.md b/packages/babel-preset-react-app/README.md index 5653831ac7e..1d0047c1241 100644 --- a/packages/babel-preset-react-app/README.md +++ b/packages/babel-preset-react-app/README.md @@ -24,10 +24,27 @@ npm install babel-preset-react-app --save-dev Then create a file named `.babelrc` with following contents in the root folder of your project: - ```js - { - "presets": ["react-app"] - } - ``` +```js +{ + "presets": ["react-app"] +} +``` This preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) and [transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/), which assumes that `Object.assign` is available or polyfilled. + +## Usage with TypeScript + +To use this package with [`@babel/preset-typescript`](https://www.npmjs.com/package/@babel/preset-typescript), you need to disable `@babel/preset-flow` first. + +You can achieve this by doing: + +``` +{ + "presets": [ + ["react-app", { + "flow": false + }], + "@babel/typescript" + ] +} +``` diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 28b3df84593..612e2fd5fff 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -6,6 +6,18 @@ */ 'use strict'; +const validateBoolOption = (name, value, defaultValue) => { + if (typeof value === 'undefined') { + value = defaultValue; + } + + if (typeof value !== 'boolean') { + throw new Error(`Preset react-app: '${name}' option must be a boolean.`); + } + + return value; +}; + module.exports = function(api, opts) { if (!opts) { opts = {}; @@ -21,6 +33,8 @@ module.exports = function(api, opts) { var isEnvDevelopment = env === 'development'; var isEnvProduction = env === 'production'; var isEnvTest = env === 'test'; + var isFlowEnabled = validateBoolOption('flow', opts.flow, true); + if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) { throw new Error( 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' + @@ -64,7 +78,7 @@ module.exports = function(api, opts) { development: isEnvDevelopment || isEnvTest, }, ], - [require('@babel/preset-flow').default], + isFlowEnabled && [require('@babel/preset-flow').default], ].filter(Boolean), plugins: [ // Experimental macros support. Will be documented after it's had some time