fix: update to use the old JSX transform (#2513)

zchenwei · web-flow · commit 0dd3e169827f · 2022-08-26T15:16:48.000-07:00
* chore: downgrade to minimum React version for build

* fix: update to use the old JSX transform

* fix: fix linting

* Create rich-peas-try.md

* Update rich-peas-try.md
diff --git a/.changeset/rich-peas-try.md b/.changeset/rich-peas-try.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix: update to use the old JSX transform to support app running on React prior to 16.14.0 where the new JSX transform does not get backported
diff --git a/packages/react/scripts/generateIcons.js b/packages/react/scripts/generateIcons.js
@@ -8,6 +8,7 @@ const iconNames = [];
 
 const template = ({ iconName, source }) => {
   return `import classNames from 'classnames';
+  import * as React from 'react';
 
   import { ComponentClassNames } from '../../shared';
   import { View } from '../../View';
diff --git a/packages/react/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx b/packages/react/src/components/ThemeProvider/__tests__/ThemeProvider.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { Theme } from '@aws-amplify/ui';
+import * as React from 'react';
 
 import { ThemeProvider } from '../index';
 import { Heading } from '../../../primitives';
diff --git a/packages/react/src/hooks/__tests__/useTheme.test.tsx b/packages/react/src/hooks/__tests__/useTheme.test.tsx
@@ -2,6 +2,7 @@ import { createTheme, WebTheme } from '@aws-amplify/ui';
 import { renderHook } from '@testing-library/react-hooks';
 import { AmplifyProvider } from '../../components/ThemeProvider';
 import { useTheme } from '../useTheme';
+import * as React from 'react';
 
 const serializeTheme = (theme: WebTheme) => JSON.stringify(theme, null, 2);
 
diff --git a/packages/react/src/primitives/Icon/icons/IconAdd.tsx b/packages/react/src/primitives/Icon/icons/IconAdd.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconCheck.tsx b/packages/react/src/primitives/Icon/icons/IconCheck.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconCheckCircle.tsx b/packages/react/src/primitives/Icon/icons/IconCheckCircle.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconCheckCircleOutline.tsx b/packages/react/src/primitives/Icon/icons/IconCheckCircleOutline.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconChevronLeft.tsx b/packages/react/src/primitives/Icon/icons/IconChevronLeft.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconChevronRight.tsx b/packages/react/src/primitives/Icon/icons/IconChevronRight.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconClose.tsx b/packages/react/src/primitives/Icon/icons/IconClose.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconError.tsx b/packages/react/src/primitives/Icon/icons/IconError.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconExpandMore.tsx b/packages/react/src/primitives/Icon/icons/IconExpandMore.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconFiberManualRecord.tsx b/packages/react/src/primitives/Icon/icons/IconFiberManualRecord.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconHighlightOff.tsx b/packages/react/src/primitives/Icon/icons/IconHighlightOff.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconIndeterminate.tsx b/packages/react/src/primitives/Icon/icons/IconIndeterminate.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconInfo.tsx b/packages/react/src/primitives/Icon/icons/IconInfo.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconMenu.tsx b/packages/react/src/primitives/Icon/icons/IconMenu.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconRemove.tsx b/packages/react/src/primitives/Icon/icons/IconRemove.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconSearch.tsx b/packages/react/src/primitives/Icon/icons/IconSearch.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconStar.tsx b/packages/react/src/primitives/Icon/icons/IconStar.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconVisibility.tsx b/packages/react/src/primitives/Icon/icons/IconVisibility.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconVisibilityOff.tsx b/packages/react/src/primitives/Icon/icons/IconVisibilityOff.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Icon/icons/IconWarning.tsx b/packages/react/src/primitives/Icon/icons/IconWarning.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import * as React from 'react';
 
 import { ComponentClassNames } from '../../shared';
 import { View } from '../../View';
diff --git a/packages/react/src/primitives/Rating/RatingMixedIcon.tsx b/packages/react/src/primitives/Rating/RatingMixedIcon.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import classNames from 'classnames';
 import { Property } from 'csstype';
 
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
@@ -4,7 +4,7 @@
     "baseUrl": ".",
     "declaration": true,
     "esModuleInterop": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "rootDir": "./src",
     "outDir": "./dist",
     "importHelpers": true,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@aws-amplify/ui-react": patch
 +---
++
 +fix: update to use the old JSX transform to support app running on React prior to 16.14.0 where the new JSX transform does not get backported
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import classNames from 'classnames';`
	`2`	`+import * as React from 'react';`
`2`	`3`
`3`	`4`	`import { ComponentClassNames } from '../../shared';`
`4`	`5`	`import { View } from '../../View';`