revert back to the old JSX transform

.changeset/wild-bags-begin.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+The new JSX transform added in [v3.12.0](https://github.com/iTwin/iTwinUI/releases/tag/%40itwin%2Fitwinui-react%403.12.0) has been reverted, because React 17 [doesn't properly support it](https://github.com/facebook/react/issues/20235).

packages/itwinui-react/scripts/build.mjs

@@ -18,7 +18,11 @@ const swcOptions = {
     'jsc.parser.syntax=typescript',
     'jsc.parser.tsx=true',
     'jsc.transform.react.useBuiltins=true',
-    'jsc.transform.react.runtime=automatic',
+
+    // We cannot (currently) use the new JSX transform, because it relies on ESM exports
+    // which are not available in React 17. See https://github.com/facebook/react/issues/20235
+    // 'jsc.transform.react.runtime=automatic',
+
     'jsc.target=es2020',
     'jsc.minify.format.comments=false',
     'jsc.externalHelpers=true',

packages/itwinui-react/src/utils/icons/StatusIconMap.tsx

@@ -2,17 +2,23 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
 import { SvgInfoCircular } from './SvgInfoCircular.js';
 import { SvgStatusError } from './SvgStatusError.js';
 import { SvgStatusSuccess } from './SvgStatusSuccess.js';
 import { SvgStatusWarning } from './SvgStatusWarning.js';
-import type { CommonProps } from '../props.js';
 
 export const StatusIconMap = {
-  negative: (args?: CommonProps) => <SvgStatusError aria-hidden {...args} />,
-  positive: (args?: CommonProps) => <SvgStatusSuccess aria-hidden {...args} />,
-  warning: (args?: CommonProps) => <SvgStatusWarning aria-hidden {...args} />,
-  informational: (args?: CommonProps) => (
+  negative: (args?: React.ComponentPropsWithoutRef<'svg'>) => (
+    <SvgStatusError aria-hidden {...args} />
+  ),
+  positive: (args?: React.ComponentPropsWithoutRef<'svg'>) => (
+    <SvgStatusSuccess aria-hidden {...args} />
+  ),
+  warning: (args?: React.ComponentPropsWithoutRef<'svg'>) => (
+    <SvgStatusWarning aria-hidden {...args} />
+  ),
+  informational: (args?: React.ComponentPropsWithoutRef<'svg'>) => (
     <SvgInfoCircular aria-hidden {...args} />
   ),
 };

packages/itwinui-react/tsconfig.json

@@ -8,7 +8,7 @@
     "esModuleInterop": true,
     "sourceMap": false,
     "allowJs": false,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "moduleResolution": "NodeNext",
     "traceResolution": false,
     "forceConsistentCasingInFileNames": true,

packages/itwinui-react/tsconfig.test.json

@@ -1,5 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
   // TODO: Test all the files, and not just the Table files or just the build files.
   "include": ["src/**/*.test.*", "src/**/*.types-test.*"]
 }