From 67cc85bb1465e342734a5cb877183849f7254a12 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 19 Oct 2023 10:53:42 +0200
Subject: [PATCH] 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                |  6 +++++
 packages/dev-utils/src/devApp/render.tsx      | 22 ++++++++++++-------
 .../reader/transformers/renderReactElement.ts | 20 ++++++++++-------
 3 files changed, 32 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/quick-roses-move.md

diff --git a/.changeset/quick-roses-move.md b/.changeset/quick-roses-move.md
new file mode 100644
index 0000000000..767ad0919e
--- /dev/null
+++ b/.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(...)`.
diff --git a/packages/dev-utils/src/devApp/render.tsx b/packages/dev-utils/src/devApp/render.tsx
index e45ba649f9..ccb1cca2e8 100644
--- a/packages/dev-utils/src/devApp/render.tsx
+++ b/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'));
+      }
+    });
   }
 }
 
diff --git a/plugins/techdocs/src/reader/transformers/renderReactElement.ts b/plugins/techdocs/src/reader/transformers/renderReactElement.ts
index f9b45065f1..ff7accf6ba 100644
--- a/plugins/techdocs/src/reader/transformers/renderReactElement.ts
+++ b/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);
+    }
+  });
 }