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();
- } else {
- ReactDOM.render(, document.getElementById('root'));
- }
+ ReactDOMPromise.then(ReactDOM => {
+ if ('createRoot' in ReactDOM) {
+ ReactDOM.createRoot(document.getElementById('root')!).render(
+ ,
+ );
+ } else {
+ ReactDOM.render(, 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);
+ }
+ });
}