feat: allow custom jsxImportSource

- configured through tsconfig
- env var for js or override

Author: hermansje

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

@@ -93,10 +93,13 @@ module.exports = function (api, opts, env) {
           // Adds component stack to warning messages
           // Adds __self attribute to JSX which React will use for some warnings
           development: isEnvDevelopment || isEnvTest,
+          runtime: opts.runtime || 'classic',
           // Will use the native built-in instead of trying to polyfill
           // behavior for any plugins that require one.
           ...(opts.runtime !== 'automatic' ? { useBuiltIns: true } : {}),
-          runtime: opts.runtime || 'classic',
+          ...(opts.runtime === 'automatic' && opts.importSource != null
+            ? { importSource: opts.importSource }
+            : {}),
         },
       ],
       isTypeScriptEnabled && [require('@babel/preset-typescript').default],

packages/react-scripts/config/jest/babelTransform.js

@@ -22,13 +22,15 @@ const hasJsxRuntime = (() => {
     return false;
   }
 })();
+const jsxImportSource = process.env.JSX_IMPORT_SOURCE;
 
 module.exports = babelJest.createTransformer({
   presets: [
     [
       require.resolve('babel-preset-react-app'),
       {
         runtime: hasJsxRuntime ? 'automatic' : 'classic',
+        ...(jsxImportSource ? { importSource: jsxImportSource } : {}),
       },
     ],
   ],

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

@@ -86,6 +86,7 @@ const hasJsxRuntime = (() => {
     return false;
   }
 })();
+const jsxImportSource = process.env.JSX_IMPORT_SOURCE;
 
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
@@ -414,6 +415,9 @@ module.exports = function (webpackEnv) {
                     require.resolve('babel-preset-react-app'),
                     {
                       runtime: hasJsxRuntime ? 'automatic' : 'classic',
+                      ...(jsxImportSource
+                        ? { importSource: jsxImportSource }
+                        : {}),
                     },
                   ],
                 ],

packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js

@@ -250,6 +250,14 @@ function verifyTypeScriptSetup() {
     }
   }
 
+  if (parsedCompilerOptions.jsxImportSource != null) {
+    if (hasJsxRuntime && semver.gte(ts.version, '4.1.0-beta')) {
+      if (process.env.JSX_IMPORT_SOURCE == null) {
+        process.env.JSX_IMPORT_SOURCE = parsedCompilerOptions.jsxImportSource;
+      }
+    }
+  }
+
   // tsconfig will have the merged "include" and "exclude" by this point
   if (parsedTsConfig.include == null) {
     appTsConfig = immer(appTsConfig, config => {