From 55c7cf4de61194d01cd7a547c823f6c6fb2ed460 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Mon, 14 Sep 2020 21:09:34 -0600 Subject: [PATCH 1/2] Use new jsx transform with react 17 --- packages/babel-preset-react-app/create.js | 7 ++++++- packages/react-scripts/config/webpack.config.js | 13 ++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index 7aacc8a23fb..6bf21c96a5c 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -54,6 +54,10 @@ module.exports = function (api, opts, env) { ); } + const hasJsxRuntime = Boolean( + api.caller(caller => !!caller && caller.hasJsxRuntime) + ); + if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) { throw new Error( 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' + @@ -95,7 +99,8 @@ module.exports = function (api, opts, env) { development: isEnvDevelopment || isEnvTest, // Will use the native built-in instead of trying to polyfill // behavior for any plugins that require one. - useBuiltIns: true, + ...(!hasJsxRuntime ? { useBuiltIns: true } : {}), + runtime: opts.runtime || 'classic', }, ], isTypeScriptEnabled && [require('@babel/preset-typescript').default], diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 0c8dbae85e1..b6f9aba87e7 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -12,6 +12,7 @@ const fs = require('fs'); const path = require('path'); const webpack = require('webpack'); const resolve = require('resolve'); +const semver = require('semver'); const PnpWebpackPlugin = require('pnp-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); @@ -33,6 +34,7 @@ const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin'); const typescriptFormatter = require('react-dev-utils/typescriptFormatter'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); +const react = require(require.resolve('react', { paths: [paths.appPath] })); // @remove-on-eject-begin const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier'); // @remove-on-eject-end @@ -397,7 +399,16 @@ module.exports = function (webpackEnv) { // @remove-on-eject-begin babelrc: false, configFile: false, - presets: [require.resolve('babel-preset-react-app')], + presets: [ + [ + require.resolve('babel-preset-react-app'), + { + runtime: semver.gte(react.version, '17.0.0-alpha.0') + ? 'automatic' + : 'classic', + }, + ], + ], // 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 a793052f92765d7bea768724427634033275e743 Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Wed, 16 Sep 2020 10:38:42 -0600 Subject: [PATCH 2/2] Formatting --- packages/babel-preset-react-app/create.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index 6bf21c96a5c..a617a507f2e 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -54,7 +54,7 @@ module.exports = function (api, opts, env) { ); } - const hasJsxRuntime = Boolean( + var hasJsxRuntime = Boolean( api.caller(caller => !!caller && caller.hasJsxRuntime) );