Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use new JSX transform with React 17 #9645

Merged
merged 2 commits into from
Sep 16, 2020
Merged

Use new JSX transform with React 17 #9645

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
55c7cf4
Use new jsx transform with react 17
iansu Sep 15, 2020
a793052
Formatting
iansu Sep 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/babel-preset-react-app/create.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@ module.exports = function (api, opts, env) {
);
}

const hasJsxRuntime = Boolean(
Copy link
Contributor

@tobiasbueschel tobiasbueschel Sep 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit & perhaps out of scope of this PR, but I noticed that we use a mixture of var and const here (e.g. on line 50) - is this intentional?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's legacy code, but I think most of us would use const today for newer code.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's a PR for it: #9648

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not intentional. I meant to change this to keep it consistent.

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 ' +
Expand Down Expand Up @@ -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],
Expand Down
13 changes: 12 additions & 1 deletion packages/react-scripts/config/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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
Expand Down Expand Up @@ -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'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is inside of // @remove-on-eject-begin. How does it work after ejecting?

: '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
Expand Down