From 775387a31a7fffadbc6558993c97f8c8c169f90e Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 16:48:50 -0400 Subject: [PATCH 01/14] Turn on helpers and test importing something with async/await works --- packages/babel-preset-react-app/create.js | 2 +- .../babel-preset-react-app/dependencies.js | 2 +- .../kitchensink/.template.dependencies.json | 1 + .../kitchensink/integration/syntax.test.js | 9 +++++ .../fixtures/kitchensink/src/App.js | 5 +++ .../features/syntax/NodeModulesCompilation.js | 35 +++++++++++++++++++ .../syntax/NodeModulesCompilation.test.js | 22 ++++++++++++ 7 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.test.js diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index 5eb16619c6a..7ad9ed632aa 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -113,7 +113,7 @@ module.exports = function(api, opts, env) { require('@babel/plugin-transform-runtime').default, { corejs: false, - helpers: false, + helpers: true, regenerator: true, // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules // We should turn this on once the lowest version of Node LTS diff --git a/packages/babel-preset-react-app/dependencies.js b/packages/babel-preset-react-app/dependencies.js index ca04e8616fc..94e93a5d382 100644 --- a/packages/babel-preset-react-app/dependencies.js +++ b/packages/babel-preset-react-app/dependencies.js @@ -76,7 +76,7 @@ module.exports = function(api, opts) { require('@babel/plugin-transform-runtime').default, { corejs: false, - helpers: false, + helpers: true, regenerator: true, // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules // We should turn this on once the lowest version of Node LTS diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json index e45cf8218e1..a753fc91948 100644 --- a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json +++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json @@ -2,6 +2,7 @@ "dependencies": { "bootstrap": "4.1.1", "jest": "23.6.0", + "ky": "0.3.0", "node-sass": "4.8.3", "normalize.css": "7.0.0", "prop-types": "15.5.6", diff --git a/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js b/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js index 54920726fa5..741f403dd55 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js @@ -90,6 +90,15 @@ describe('Integration', () => { doc.defaultView.close(); }); + it('babel node modules', async () => { + const doc = await initDOM('babel-node-modules'); + + expect( + doc.getElementById('feature-babel-node-modules').childElementCount + ).toBe(1); + doc.defaultView.close(); + }); + it('object destructuring', async () => { const doc = await initDOM('object-destructuring'); diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js index 380a49fc639..25d01d56ccf 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/App.js +++ b/packages/react-scripts/fixtures/kitchensink/src/App.js @@ -134,6 +134,11 @@ class App extends Component { this.setFeature(f.default) ); break; + case 'babel-node-modules': + import('./features/syntax/NodeModulesCompilation').then(f => + this.setFeature(f.default) + ); + break; case 'image-inclusion': import('./features/webpack/ImageInclusion').then(f => this.setFeature(f.default) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.js new file mode 100644 index 00000000000..fd10ed62e84 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.js @@ -0,0 +1,35 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import ky from 'ky'; + +export default class extends Component { + static propTypes = { + onReady: PropTypes.func.isRequired, + }; + + state = { ip: null }; + + async componentDidMount() { + const ip = await ky.get('https://canihazip.com/s').text(); + this.setState({ ip }); + } + + componentDidUpdate() { + this.props.onReady(); + } + + render() { + return ( +
+ {this.state.ip ? {this.state.ip} : null} +
+ ); + } +} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.test.js new file mode 100644 index 00000000000..b18cf618481 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.test.js @@ -0,0 +1,22 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import ReactDOM from 'react-dom'; + +describe('node_modules compile', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + return import('./NodeModulesCompilation').then( + ({ default: NodeModulesCompilation }) => { + return new Promise(resolve => { + ReactDOM.render(, div); + }); + } + ); + }); +}); From ca2777fee95d4e022960ec2c7a7e45022018a00a Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 17:13:26 -0400 Subject: [PATCH 02/14] Compiling babel runtime breaks itself --- packages/react-scripts/config/webpack.config.dev.js | 3 ++- packages/react-scripts/config/webpack.config.prod.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 24f51c018b7..985e70993b4 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -79,7 +79,7 @@ module.exports = { mode: 'development', // You may want 'eval' instead if you prefer to see the compiled output in DevTools. // See the discussion in https://github.com/facebook/create-react-app/issues/343 - devtool: 'cheap-module-source-map', + devtool: false, // These are the "entry points" to our application. // This means they will be the "root" imports that are included in JS bundle. entry: [ @@ -275,6 +275,7 @@ module.exports = { // Unlike the application JS, we only compile the standard ES features. { test: /\.js$/, + exclude: [/@babel\/runtime/], use: [ // This loader parallelizes code compilation, it is optional but // improves compile time on larger projects diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 76e767faddf..4b8dc4834f1 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -314,6 +314,7 @@ module.exports = { // Unlike the application JS, we only compile the standard ES features. { test: /\.js$/, + exclude: [/@babel\/runtime/], use: [ // This loader parallelizes code compilation, it is optional but // improves compile time on larger projects From b86f9bd3e2e8d28142db9177323b1981480152f6 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 17:34:59 -0400 Subject: [PATCH 03/14] Add helpers option to babel plugin with defaults --- packages/babel-preset-react-app/create.js | 15 +++---------- .../babel-preset-react-app/dependencies.js | 5 ++++- packages/babel-preset-react-app/package.json | 3 ++- packages/babel-preset-react-app/utils.js | 21 +++++++++++++++++++ .../webpack.config.iframe.js | 5 ++++- .../config/webpack.config.dev.js | 9 +++++--- .../config/webpack.config.prod.js | 7 +++++-- 7 files changed, 45 insertions(+), 20 deletions(-) create mode 100644 packages/babel-preset-react-app/utils.js diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index 7ad9ed632aa..23995ab708d 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -6,17 +6,7 @@ */ '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; -}; +const { validateBoolOption } = require('./utils'); module.exports = function(api, opts, env) { if (!opts) { @@ -27,6 +17,7 @@ module.exports = function(api, opts, env) { var isEnvProduction = env === 'production'; var isEnvTest = env === 'test'; var isFlowEnabled = validateBoolOption('flow', opts.flow, true); + var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, true); if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) { throw new Error( @@ -113,7 +104,7 @@ module.exports = function(api, opts, env) { require('@babel/plugin-transform-runtime').default, { corejs: false, - helpers: true, + helpers: areHelpersEnabled, regenerator: true, // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules // We should turn this on once the lowest version of Node LTS diff --git a/packages/babel-preset-react-app/dependencies.js b/packages/babel-preset-react-app/dependencies.js index 94e93a5d382..c98df7c2483 100644 --- a/packages/babel-preset-react-app/dependencies.js +++ b/packages/babel-preset-react-app/dependencies.js @@ -6,6 +6,8 @@ */ 'use strict'; +const { validateBoolOption } = require('./utils'); + module.exports = function(api, opts) { if (!opts) { opts = {}; @@ -21,6 +23,7 @@ module.exports = function(api, opts) { var isEnvDevelopment = env === 'development'; var isEnvProduction = env === 'production'; var isEnvTest = env === 'test'; + var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, false); if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) { throw new Error( 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' + @@ -76,7 +79,7 @@ module.exports = function(api, opts) { require('@babel/plugin-transform-runtime').default, { corejs: false, - helpers: true, + helpers: areHelpersEnabled, regenerator: true, // https://babeljs.io/docs/en/babel-plugin-transform-runtime#useesmodules // We should turn this on once the lowest version of Node LTS diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index a985fd9ab58..4e7ecd37b5b 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -15,7 +15,8 @@ "loader.js", "overrides.js", "prod.js", - "test.js" + "test.js", + "utils.js" ], "dependencies": { "@babel/core": "7.1.0", diff --git a/packages/babel-preset-react-app/utils.js b/packages/babel-preset-react-app/utils.js new file mode 100644 index 00000000000..a3251a8f563 --- /dev/null +++ b/packages/babel-preset-react-app/utils.js @@ -0,0 +1,21 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +'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 = { validateBoolOption }; diff --git a/packages/react-error-overlay/webpack.config.iframe.js b/packages/react-error-overlay/webpack.config.iframe.js index 67157bad440..6a39584ffdf 100644 --- a/packages/react-error-overlay/webpack.config.iframe.js +++ b/packages/react-error-overlay/webpack.config.iframe.js @@ -32,12 +32,15 @@ module.exports = { // Dependencies { test: /\.js$/, + exclude: /@babel\/runtime/, use: { loader: 'babel-loader', options: { babelrc: false, compact: false, - presets: ['babel-preset-react-app/dependencies'], + presets: [ + ['babel-preset-react-app/dependencies', { helpers: true }], + ], }, }, }, diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 985e70993b4..09e282caa4a 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -79,7 +79,7 @@ module.exports = { mode: 'development', // You may want 'eval' instead if you prefer to see the compiled output in DevTools. // See the discussion in https://github.com/facebook/create-react-app/issues/343 - devtool: false, + devtool: 'cheap-module-source-map', // These are the "entry points" to our application. // This means they will be the "root" imports that are included in JS bundle. entry: [ @@ -275,7 +275,7 @@ module.exports = { // Unlike the application JS, we only compile the standard ES features. { test: /\.js$/, - exclude: [/@babel\/runtime/], + exclude: /@babel\/runtime/, use: [ // This loader parallelizes code compilation, it is optional but // improves compile time on larger projects @@ -291,7 +291,10 @@ module.exports = { babelrc: false, compact: false, presets: [ - require.resolve('babel-preset-react-app/dependencies'), + [ + require.resolve('babel-preset-react-app/dependencies'), + { helpers: true }, + ], ], cacheDirectory: true, // Don't waste time on Gzipping the cache diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 4b8dc4834f1..ec94170fd6e 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -314,7 +314,7 @@ module.exports = { // Unlike the application JS, we only compile the standard ES features. { test: /\.js$/, - exclude: [/@babel\/runtime/], + exclude: /@babel\/runtime/, use: [ // This loader parallelizes code compilation, it is optional but // improves compile time on larger projects @@ -325,7 +325,10 @@ module.exports = { babelrc: false, compact: false, presets: [ - require.resolve('babel-preset-react-app/dependencies'), + [ + require.resolve('babel-preset-react-app/dependencies'), + { helpers: true }, + ], ], cacheDirectory: true, // Save disk space when time isn't as important From 937d786fce018f4afe4a2d4e46afa46b3989c61d Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 17:49:07 -0400 Subject: [PATCH 04/14] Make helpers off by default and on in our configuration --- packages/babel-preset-react-app/create.js | 2 +- packages/react-scripts/config/jest/babelTransform.js | 2 +- packages/react-scripts/config/webpack.config.dev.js | 7 ++++++- packages/react-scripts/config/webpack.config.prod.js | 7 ++++++- 4 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index 23995ab708d..394c1d33b0d 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -17,7 +17,7 @@ module.exports = function(api, opts, env) { var isEnvProduction = env === 'production'; var isEnvTest = env === 'test'; var isFlowEnabled = validateBoolOption('flow', opts.flow, true); - var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, true); + var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, false); if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) { throw new Error( diff --git a/packages/react-scripts/config/jest/babelTransform.js b/packages/react-scripts/config/jest/babelTransform.js index 02742e90c6c..829438ec501 100644 --- a/packages/react-scripts/config/jest/babelTransform.js +++ b/packages/react-scripts/config/jest/babelTransform.js @@ -10,6 +10,6 @@ const babelJest = require('babel-jest'); module.exports = babelJest.createTransformer({ - presets: [require.resolve('babel-preset-react-app')], + presets: [[require.resolve('babel-preset-react-app'), { helpers: true }]], babelrc: false, }); diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 09e282caa4a..54b18fdd280 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -234,7 +234,12 @@ module.exports = { options: { // @remove-on-eject-begin babelrc: false, - presets: [require.resolve('babel-preset-react-app')], + presets: [ + [ + require.resolve('babel-preset-react-app'), + { helpers: true }, + ], + ], // Make sure we have a unique cache identifier, erring on the // side of caution. // We remove this when the user ejects because the default diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index ec94170fd6e..950eea8b924 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -275,7 +275,12 @@ module.exports = { options: { // @remove-on-eject-begin babelrc: false, - presets: [require.resolve('babel-preset-react-app')], + presets: [ + [ + require.resolve('babel-preset-react-app'), + { helpers: true }, + ], + ], // Make sure we have a unique cache identifier, erring on the // side of caution. // We remove this when the user ejects because the default From b74852a031584b4d34e1f103356f4288026aa6bb Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 17:51:43 -0400 Subject: [PATCH 05/14] Hit eject and e2e --- packages/react-error-overlay/.babelrc | 2 +- packages/react-scripts/scripts/eject.js | 2 +- tasks/e2e-kitchensink.sh | 4 ---- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/react-error-overlay/.babelrc b/packages/react-error-overlay/.babelrc index c14b2828d16..f7e18d2c3bb 100644 --- a/packages/react-error-overlay/.babelrc +++ b/packages/react-error-overlay/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["react-app"] + "presets": [["react-app", { "helpers": true }]] } diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index 84353fc3c81..ae8f25e136a 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -208,7 +208,7 @@ inquirer // Add Babel config console.log(` Adding ${cyan('Babel')} preset`); appPackage.babel = { - presets: ['react-app'], + presets: [['react-app', { helpers: true }]], }; // Add ESlint config diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index a4cb3438f26..67429fdc585 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -146,10 +146,6 @@ PORT=3001 \ nohup yarn start &>$tmp_server_log & grep -q 'You can now view' <(tail -f $tmp_server_log) -# Before running Mocha, specify that it should use our preset -# TODO: this is very hacky and we should find some other solution -echo '{"presets":["react-app"]}' > .babelrc - # Test "development" environment E2E_URL="http://localhost:3001" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ From 3cdbbfeb5977a496f2a9194fccdb7903e1c05ee7 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 17:52:04 -0400 Subject: [PATCH 06/14] meh --- packages/react-scripts/config/jest/babelTransform.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/jest/babelTransform.js b/packages/react-scripts/config/jest/babelTransform.js index 829438ec501..02742e90c6c 100644 --- a/packages/react-scripts/config/jest/babelTransform.js +++ b/packages/react-scripts/config/jest/babelTransform.js @@ -10,6 +10,6 @@ const babelJest = require('babel-jest'); module.exports = babelJest.createTransformer({ - presets: [[require.resolve('babel-preset-react-app'), { helpers: true }]], + presets: [require.resolve('babel-preset-react-app')], babelrc: false, }); From 3dbc5f8e43fd28b07404b3c154dc1725a79d085a Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 17:55:41 -0400 Subject: [PATCH 07/14] copy'n'paste --- packages/babel-preset-react-app/create.js | 12 ++++++++++- .../babel-preset-react-app/dependencies.js | 12 ++++++++++- packages/babel-preset-react-app/package.json | 3 +-- packages/babel-preset-react-app/utils.js | 21 ------------------- 4 files changed, 23 insertions(+), 25 deletions(-) delete mode 100644 packages/babel-preset-react-app/utils.js diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index 394c1d33b0d..a6b8048571a 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -6,7 +6,17 @@ */ 'use strict'; -const { validateBoolOption } = require('./utils'); +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, env) { if (!opts) { diff --git a/packages/babel-preset-react-app/dependencies.js b/packages/babel-preset-react-app/dependencies.js index c98df7c2483..6c8e431f985 100644 --- a/packages/babel-preset-react-app/dependencies.js +++ b/packages/babel-preset-react-app/dependencies.js @@ -6,7 +6,17 @@ */ 'use strict'; -const { validateBoolOption } = require('./utils'); +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) { diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 4e7ecd37b5b..a985fd9ab58 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -15,8 +15,7 @@ "loader.js", "overrides.js", "prod.js", - "test.js", - "utils.js" + "test.js" ], "dependencies": { "@babel/core": "7.1.0", diff --git a/packages/babel-preset-react-app/utils.js b/packages/babel-preset-react-app/utils.js deleted file mode 100644 index a3251a8f563..00000000000 --- a/packages/babel-preset-react-app/utils.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -'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 = { validateBoolOption }; From 2b06e8b144235703cf94ddf968adb8ea4ef4a4e5 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 17:59:50 -0400 Subject: [PATCH 08/14] change again --- packages/babel-preset-react-app/create.js | 2 +- packages/react-error-overlay/.babelrc | 2 +- .../config/webpack.config.dev.js | 7 +--- .../config/webpack.config.prod.js | 7 +--- .../kitchensink/.template.dependencies.json | 1 - .../fixtures/kitchensink/src/App.js | 5 --- .../features/syntax/NodeModulesCompilation.js | 35 ------------------- .../syntax/NodeModulesCompilation.test.js | 22 ------------ 8 files changed, 4 insertions(+), 77 deletions(-) delete mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.js delete mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.test.js diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index a6b8048571a..88f4759c506 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -27,7 +27,7 @@ module.exports = function(api, opts, env) { var isEnvProduction = env === 'production'; var isEnvTest = env === 'test'; var isFlowEnabled = validateBoolOption('flow', opts.flow, true); - var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, false); + var areHelpersEnabled = validateBoolOption('helpers', opts.helpers, true); if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) { throw new Error( diff --git a/packages/react-error-overlay/.babelrc b/packages/react-error-overlay/.babelrc index f7e18d2c3bb..c14b2828d16 100644 --- a/packages/react-error-overlay/.babelrc +++ b/packages/react-error-overlay/.babelrc @@ -1,3 +1,3 @@ { - "presets": [["react-app", { "helpers": true }]] + "presets": ["react-app"] } diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 54b18fdd280..09e282caa4a 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -234,12 +234,7 @@ module.exports = { options: { // @remove-on-eject-begin babelrc: false, - presets: [ - [ - require.resolve('babel-preset-react-app'), - { helpers: true }, - ], - ], + presets: [require.resolve('babel-preset-react-app')], // Make sure we have a unique cache identifier, erring on the // side of caution. // We remove this when the user ejects because the default diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 950eea8b924..ec94170fd6e 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -275,12 +275,7 @@ module.exports = { options: { // @remove-on-eject-begin babelrc: false, - presets: [ - [ - require.resolve('babel-preset-react-app'), - { helpers: true }, - ], - ], + presets: [require.resolve('babel-preset-react-app')], // Make sure we have a unique cache identifier, erring on the // side of caution. // We remove this when the user ejects because the default diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json index a753fc91948..e45cf8218e1 100644 --- a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json +++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json @@ -2,7 +2,6 @@ "dependencies": { "bootstrap": "4.1.1", "jest": "23.6.0", - "ky": "0.3.0", "node-sass": "4.8.3", "normalize.css": "7.0.0", "prop-types": "15.5.6", diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js index 25d01d56ccf..380a49fc639 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/App.js +++ b/packages/react-scripts/fixtures/kitchensink/src/App.js @@ -134,11 +134,6 @@ class App extends Component { this.setFeature(f.default) ); break; - case 'babel-node-modules': - import('./features/syntax/NodeModulesCompilation').then(f => - this.setFeature(f.default) - ); - break; case 'image-inclusion': import('./features/webpack/ImageInclusion').then(f => this.setFeature(f.default) diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.js deleted file mode 100644 index fd10ed62e84..00000000000 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import ky from 'ky'; - -export default class extends Component { - static propTypes = { - onReady: PropTypes.func.isRequired, - }; - - state = { ip: null }; - - async componentDidMount() { - const ip = await ky.get('https://canihazip.com/s').text(); - this.setState({ ip }); - } - - componentDidUpdate() { - this.props.onReady(); - } - - render() { - return ( -
- {this.state.ip ? {this.state.ip} : null} -
- ); - } -} diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.test.js deleted file mode 100644 index b18cf618481..00000000000 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/NodeModulesCompilation.test.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React from 'react'; -import ReactDOM from 'react-dom'; - -describe('node_modules compile', () => { - it('renders without crashing', () => { - const div = document.createElement('div'); - return import('./NodeModulesCompilation').then( - ({ default: NodeModulesCompilation }) => { - return new Promise(resolve => { - ReactDOM.render(, div); - }); - } - ); - }); -}); From 8ef839d9d14014eee4da7ea03b104bc579569ff9 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 18:01:55 -0400 Subject: [PATCH 09/14] Turn off helpers by default in /prod, /dev, /test --- packages/babel-preset-react-app/dev.js | 2 +- packages/babel-preset-react-app/prod.js | 2 +- packages/babel-preset-react-app/test.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/babel-preset-react-app/dev.js b/packages/babel-preset-react-app/dev.js index 8eb986bd59c..87c95d438f1 100644 --- a/packages/babel-preset-react-app/dev.js +++ b/packages/babel-preset-react-app/dev.js @@ -9,5 +9,5 @@ const create = require('./create'); module.exports = function(api, opts) { - return create(api, opts, 'development'); + return create(api, { helpers: false, ...(opts || {}) }, 'development'); }; diff --git a/packages/babel-preset-react-app/prod.js b/packages/babel-preset-react-app/prod.js index 9e3697f3eea..939d39c26b2 100644 --- a/packages/babel-preset-react-app/prod.js +++ b/packages/babel-preset-react-app/prod.js @@ -9,5 +9,5 @@ const create = require('./create'); module.exports = function(api, opts) { - return create(api, opts, 'production'); + return create(api, { helpers: false, ...(opts || {}) }, 'production'); }; diff --git a/packages/babel-preset-react-app/test.js b/packages/babel-preset-react-app/test.js index 15558ff2c4b..ea9ac1ca407 100644 --- a/packages/babel-preset-react-app/test.js +++ b/packages/babel-preset-react-app/test.js @@ -9,5 +9,5 @@ const create = require('./create'); module.exports = function(api, opts) { - return create(api, opts, 'test'); + return create(api, { helpers: false, ...(opts || {}) }, 'test'); }; From 55a605b69202cd93105a20ab1564901c7d14c3e9 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 18:04:11 -0400 Subject: [PATCH 10/14] oops --- .../fixtures/kitchensink/integration/syntax.test.js | 9 --------- packages/react-scripts/scripts/eject.js | 2 +- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js b/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js index 741f403dd55..54920726fa5 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js @@ -90,15 +90,6 @@ describe('Integration', () => { doc.defaultView.close(); }); - it('babel node modules', async () => { - const doc = await initDOM('babel-node-modules'); - - expect( - doc.getElementById('feature-babel-node-modules').childElementCount - ).toBe(1); - doc.defaultView.close(); - }); - it('object destructuring', async () => { const doc = await initDOM('object-destructuring'); diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index ae8f25e136a..84353fc3c81 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -208,7 +208,7 @@ inquirer // Add Babel config console.log(` Adding ${cyan('Babel')} preset`); appPackage.babel = { - presets: [['react-app', { helpers: true }]], + presets: ['react-app'], }; // Add ESlint config From 071aa4fafe8e858601b43dec2eff2d384fdfed56 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 18:13:43 -0400 Subject: [PATCH 11/14] Spread undefined --- packages/babel-preset-react-app/dev.js | 2 +- packages/babel-preset-react-app/prod.js | 2 +- packages/babel-preset-react-app/test.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/babel-preset-react-app/dev.js b/packages/babel-preset-react-app/dev.js index 87c95d438f1..4090c944907 100644 --- a/packages/babel-preset-react-app/dev.js +++ b/packages/babel-preset-react-app/dev.js @@ -9,5 +9,5 @@ const create = require('./create'); module.exports = function(api, opts) { - return create(api, { helpers: false, ...(opts || {}) }, 'development'); + return create(api, { helpers: false, ...opts }, 'development'); }; diff --git a/packages/babel-preset-react-app/prod.js b/packages/babel-preset-react-app/prod.js index 939d39c26b2..63a8a233563 100644 --- a/packages/babel-preset-react-app/prod.js +++ b/packages/babel-preset-react-app/prod.js @@ -9,5 +9,5 @@ const create = require('./create'); module.exports = function(api, opts) { - return create(api, { helpers: false, ...(opts || {}) }, 'production'); + return create(api, { helpers: false, ...opts }, 'production'); }; diff --git a/packages/babel-preset-react-app/test.js b/packages/babel-preset-react-app/test.js index ea9ac1ca407..f3a5484bb41 100644 --- a/packages/babel-preset-react-app/test.js +++ b/packages/babel-preset-react-app/test.js @@ -9,5 +9,5 @@ const create = require('./create'); module.exports = function(api, opts) { - return create(api, { helpers: false, ...(opts || {}) }, 'test'); + return create(api, { helpers: false, ...opts }, 'test'); }; From 82c82f85b55526716714362c51f5249afdc3b2e4 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 18:20:44 -0400 Subject: [PATCH 12/14] Use object assign not object spread --- packages/babel-preset-react-app/dev.js | 2 +- packages/babel-preset-react-app/prod.js | 2 +- packages/babel-preset-react-app/test.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/babel-preset-react-app/dev.js b/packages/babel-preset-react-app/dev.js index 4090c944907..ce87adea4fa 100644 --- a/packages/babel-preset-react-app/dev.js +++ b/packages/babel-preset-react-app/dev.js @@ -9,5 +9,5 @@ const create = require('./create'); module.exports = function(api, opts) { - return create(api, { helpers: false, ...opts }, 'development'); + return create(api, Object.assign({ helpers: false }, opts), 'development'); }; diff --git a/packages/babel-preset-react-app/prod.js b/packages/babel-preset-react-app/prod.js index 63a8a233563..0873aee7258 100644 --- a/packages/babel-preset-react-app/prod.js +++ b/packages/babel-preset-react-app/prod.js @@ -9,5 +9,5 @@ const create = require('./create'); module.exports = function(api, opts) { - return create(api, { helpers: false, ...opts }, 'production'); + return create(api, Object.assign({ helpers: false }, opts), 'production'); }; diff --git a/packages/babel-preset-react-app/test.js b/packages/babel-preset-react-app/test.js index f3a5484bb41..be189fc3265 100644 --- a/packages/babel-preset-react-app/test.js +++ b/packages/babel-preset-react-app/test.js @@ -9,5 +9,5 @@ const create = require('./create'); module.exports = function(api, opts) { - return create(api, { helpers: false, ...opts }, 'test'); + return create(api, Object.assign({ helpers: false }, opts), 'test'); }; From a404acc2c5ad4e3d62e7a388b77041f28a0602e3 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 18:35:08 -0400 Subject: [PATCH 13/14] Put preset in template since it's needed --- packages/react-scripts/fixtures/kitchensink/.babelrc | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/react-scripts/fixtures/kitchensink/.babelrc diff --git a/packages/react-scripts/fixtures/kitchensink/.babelrc b/packages/react-scripts/fixtures/kitchensink/.babelrc new file mode 100644 index 00000000000..492e8d1d235 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/.babelrc @@ -0,0 +1 @@ +{ "presets": ["react-app"] } From 5bb2ee2f0cca4d3036b21827d9e3d7e530d6a773 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 25 Sep 2018 18:37:45 -0400 Subject: [PATCH 14/14] Fix e2e tests --- packages/react-scripts/fixtures/kitchensink/.babelrc | 1 - tasks/e2e-kitchensink.sh | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) delete mode 100644 packages/react-scripts/fixtures/kitchensink/.babelrc diff --git a/packages/react-scripts/fixtures/kitchensink/.babelrc b/packages/react-scripts/fixtures/kitchensink/.babelrc deleted file mode 100644 index 492e8d1d235..00000000000 --- a/packages/react-scripts/fixtures/kitchensink/.babelrc +++ /dev/null @@ -1 +0,0 @@ -{ "presets": ["react-app"] } diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 67429fdc585..345d0358b54 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -146,6 +146,10 @@ PORT=3001 \ nohup yarn start &>$tmp_server_log & grep -q 'You can now view' <(tail -f $tmp_server_log) +# We haven't ejected yet which means there's no `babel` key +# in package.json yet +echo '{"presets":["react-app"]}' > .babelrc + # Test "development" environment E2E_URL="http://localhost:3001" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \