dev-utils,techdocs: add conditional support for React 18

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/eleven-hounds-invent.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+In frontend builds and tests `process.env.HAS_REACT_DOM_CLIENT` will now be defined if `react-dom/client` is present, i.e. if using React 18. This allows for conditional imports of `react-dom/client`.

.changeset/shaggy-beers-collect.md

@@ -0,0 +1,6 @@
+---
+'@backstage/dev-utils': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Added support for React 18. The new `createRoot` API from `react-dom/client` will now be used if present.

packages/dev-utils/src/devApp/render.tsx

@@ -49,10 +49,7 @@ import { createRoutesFromChildren, Route } from 'react-router-dom';
 import { SidebarThemeSwitcher } from './SidebarThemeSwitcher';
 import 'react-dom';
 
-let ReactDOM:
-  | typeof import('react-dom')
-  // TODO: replace with import('react-dom/client') when repo is migrated to 18
-  | { createRoot(el: HTMLElement): { render(el: JSX.Element): void } };
+let ReactDOM: typeof import('react-dom') | typeof import('react-dom/client');
 if (process.env.HAS_REACT_DOM_CLIENT) {
   ReactDOM = require('react-dom/client');
 } else {

plugins/techdocs/src/reader/transformers/renderReactElement.ts

@@ -14,10 +14,7 @@
  * limitations under the License.
  */
 
-let ReactDOM:
-  | typeof import('react-dom')
-  // TODO: replace with import('react-dom/client') when repo is migrated to 18
-  | { createRoot(el: HTMLElement): { render(el: JSX.Element): void } };
+let ReactDOM: typeof import('react-dom') | typeof import('react-dom/client');
 if (process.env.HAS_REACT_DOM_CLIENT) {
   ReactDOM = require('react-dom/client');
 } else {