Updated config so we don't have to import React on every tsx file

build/babel.config.js

@@ -24,7 +24,7 @@ module.exports = {
         [
             "@babel/preset-react",
             {
-                // runtime: "automatic",
+                runtime: "automatic",
                 useBuiltIns: true,
                 development: !IS_PRODUCTION
             }
@@ -49,7 +49,6 @@ module.exports = {
             }
         ],
         "babel-plugin-jsx-control-statements",
-        "babel-plugin-react-require",
         IS_PRODUCTION && "babel-plugin-jsx-remove-data-test-id",
         !IS_TEST && [
             "babel-plugin-named-asset-import",

package.json

@@ -107,7 +107,6 @@
     "babel-plugin-jsx-control-statements": "4.1.0",
     "babel-plugin-jsx-remove-data-test-id": "2.1.3",
     "babel-plugin-named-asset-import": "0.3.7",
-    "babel-plugin-react-require": "3.1.3",
     "browserslist": "4.14.7",
     "chalk": "4.1.0",
     "chromatic": "5.4.0",

packages/react-components/src/shared/src/augmentElement.tsx

@@ -1,8 +1,8 @@
+import { ElementType, HTMLAttributes, ReactElement, RefAttributes, cloneElement } from "react";
 import { isString } from "lodash";
 import { isValidElementType } from "react-is";
 import { mergeProps } from "./mergeProps";
 import { normalizeSize } from "./normalizeSize";
-import React, { ElementType, HTMLAttributes, ReactElement, RefAttributes, cloneElement } from "react";
 import type { SizeAdapter } from "./createSizeAdapter";
 
 export function augmentElement(element: ReactElement & RefAttributes<any>, newProps: Record<string, any>) {

packages/react-components/src/shared/src/slots.tsx

@@ -1,6 +1,6 @@
+import { Children, ComponentType, ReactElement, ReactNode, useMemo } from "react";
 import { augmentElement, resolveChildren } from "..";
 import { isNil, isString, isUndefined } from "lodash";
-import React, { Children, ComponentType, ReactElement, ReactNode, useMemo } from "react";
 
 const SLOT_KEY = "__slot__";
 

tsconfig.json

@@ -11,7 +11,7 @@
     // "strict": true, // Enabling --strict enables --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictBindCallApply, --strictNullChecks, --strictFunctionTypes and --strictPropertyInitialization.
 
     //  the bare minimum for our project
-    "jsx": "react",
+    "jsx": "react-jsx",
     "outDir": "./dist",
     "allowJs": true,
     "esModuleInterop": true,