dev-utils,techdocs: use dynamic import instead of require for conditional react-dom

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

.changeset/quick-roses-move.md

@@ -0,0 +1,6 @@
+---
+'@backstage/dev-utils': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Switched the conditional `react-dom/client` import to use `import(...)` rather than `require(...)`.

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

@@ -49,11 +49,13 @@ import { createRoutesFromChildren, Route } from 'react-router-dom';
 import { SidebarThemeSwitcher } from './SidebarThemeSwitcher';
 import 'react-dom';
 
-let ReactDOM: typeof import('react-dom') | typeof import('react-dom/client');
+let ReactDOMPromise: Promise<
+  typeof import('react-dom') | typeof import('react-dom/client')
+>;
 if (process.env.HAS_REACT_DOM_CLIENT) {
-  ReactDOM = require('react-dom/client');
+  ReactDOMPromise = import('react-dom/client');
 } else {
-  ReactDOM = require('react-dom');
+  ReactDOMPromise = import('react-dom');
 }
 
 export function isReactRouterBeta(): boolean {
@@ -242,11 +244,15 @@ export class DevAppBuilder {
       window.location.pathname = this.defaultPage;
     }
 
-    if ('createRoot' in ReactDOM) {
-      ReactDOM.createRoot(document.getElementById('root')!).render(<DevApp />);
-    } else {
-      ReactDOM.render(<DevApp />, document.getElementById('root'));
-    }
+    ReactDOMPromise.then(ReactDOM => {
+      if ('createRoot' in ReactDOM) {
+        ReactDOM.createRoot(document.getElementById('root')!).render(
+          <DevApp />,
+        );
+      } else {
+        ReactDOM.render(<DevApp />, document.getElementById('root'));
+      }
+    });
   }
 }
 

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

@@ -14,18 +14,22 @@
  * limitations under the License.
  */
 
-let ReactDOM: typeof import('react-dom') | typeof import('react-dom/client');
+let ReactDOMPromise: Promise<
+  typeof import('react-dom') | typeof import('react-dom/client')
+>;
 if (process.env.HAS_REACT_DOM_CLIENT) {
-  ReactDOM = require('react-dom/client');
+  ReactDOMPromise = import('react-dom/client');
 } else {
-  ReactDOM = require('react-dom');
+  ReactDOMPromise = import('react-dom');
 }
 
 /** @internal */
 export function renderReactElement(element: JSX.Element, root: HTMLElement) {
-  if ('createRoot' in ReactDOM) {
-    ReactDOM.createRoot(root).render(element);
-  } else {
-    ReactDOM.render(element, root);
-  }
+  ReactDOMPromise.then(ReactDOM => {
+    if ('createRoot' in ReactDOM) {
+      ReactDOM.createRoot(root).render(element);
+    } else {
+      ReactDOM.render(element, root);
+    }
+  });
 }