Attempt to add back jsx transform detection

Author: iansu

packages/babel-preset-react-app/create.js

@@ -8,8 +8,6 @@
 
 const path = require('path');
 
-const useJsxTransform = process.env.DISABLE_NEW_JSX_TRANSFORM !== 'true';
-
 const validateBoolOption = (name, value, defaultValue) => {
   if (typeof value === 'undefined') {
     value = defaultValue;
@@ -56,6 +54,10 @@ module.exports = function (api, opts, env) {
     );
   }
 
+  var 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 ' +
@@ -97,8 +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.
-          ...(!useJsxTransform ? { useBuiltIns: true } : {}),
-          runtime: useJsxTransform ? 'automatic' : 'classic',
+          ...(!hasJsxRuntime ? { useBuiltIns: true } : {}),
+          runtime: hasJsxRuntime ? 'automatic' : 'classic',
         },
       ],
       isTypeScriptEnabled && [require('@babel/preset-typescript').default],

packages/eslint-config-react-app/base.js

@@ -11,8 +11,6 @@
 // React App support, and is used as the `baseConfig` for `eslint-loader`
 // to ensure that user-provided configs don't need this boilerplate.
 
-const useJsxTransform = process.env.DISABLE_NEW_JSX_TRANSFORM !== 'true';
-
 module.exports = {
   root: true,
 
@@ -45,8 +43,5 @@ module.exports = {
   rules: {
     'react/jsx-uses-vars': 'warn',
     'react/jsx-uses-react': 'warn',
-    ...(!useJsxTransform && {
-      'react/react-in-jsx-scope': 'error',
-    }),
   },
 };

packages/react-scripts/config/webpack.config.js

@@ -71,6 +71,19 @@ const cssModuleRegex = /\.module\.css$/;
 const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;
 
+const hasJsxRuntime = (() => {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+    return false;
+  }
+
+  try {
+    require.resolve('react/jsx-runtime');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 module.exports = function (webpackEnv) {
@@ -396,7 +409,14 @@ 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: hasJsxRuntime ? '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
@@ -737,6 +757,11 @@ module.exports = function (webpackEnv) {
         resolvePluginsRelativeTo: __dirname,
         baseConfig: {
           extends: [require.resolve('eslint-config-react-app/base')],
+          rules: {
+            ...(!hasJsxRuntime && {
+              'react/react-in-jsx-scope': 'error',
+            }),
+          },
         },
       }),
     ].filter(Boolean),