Fix: awaiting potential react-dom promise

Author: stevematney

src/ReactHTMLElement.ts

@@ -1,6 +1,6 @@
 import type ReactDOM from 'react-dom';
 import type { Root } from 'react-dom/client';
-import { createRoot } from './react-dom-client';
+import { getCreateRoot } from './react-dom-client';
 
 type Renderable = Parameters<ReactDOM.Renderer>[0][number];
 type ReactHTMLElementDOMRoot = Pick<Root, 'render' | 'unmount'>;
@@ -42,10 +42,10 @@ class ReactHTMLElement extends HTMLElement {
     this._mountPoint = mount;
   }
 
-  root(): ReactHTMLElementDOMRoot {
+  async root(): Promise<ReactHTMLElementDOMRoot> {
     if (this._root) return this._root;
 
-    this._root = createRoot(this.mountPoint);
+    this._root = (await getCreateRoot())(this.mountPoint);
     return this._root;
   }
 
@@ -55,8 +55,8 @@ class ReactHTMLElement extends HTMLElement {
     void this.renderRoot(app);
   }
 
-  renderRoot(app: Renderable): void {
-    const root = this.root();
+  async renderRoot(app: Renderable): Promise<void> {
+    const root = await this.root();
     root.render(app);
   }
 

src/react-dom-client.ts

@@ -5,14 +5,6 @@ type ReactDOM18 = ReactDOMOriginal & {
   createRoot?: CreateRoot;
 };
 
-let MaybeReactDOM18: ReactDOM18;
-try {
-  // eslint-disable-next-line global-require,@typescript-eslint/no-var-requires
-  MaybeReactDOM18 = require('react-dom/client') as ReactDOM18;
-} catch {
-  MaybeReactDOM18 = ReactDOM as ReactDOM18;
-}
-
 type CreateRoot = typeof createRootOriginal;
 type CreateRootParams = Parameters<CreateRoot>;
 type ReactDOMOriginal = typeof ReactDOM;
@@ -30,5 +22,19 @@ const createRootFake = (container: CreateRootParams[0]) => {
   return newRoot;
 };
 
+let checkedFor18 = false;
+let MaybeReactDOM18: ReactDOM18;
 // eslint-disable-next-line import/prefer-default-export
-export const { createRoot = createRootFake } = MaybeReactDOM18;
+export const getCreateRoot = async () => {
+  if (!checkedFor18) {
+    try {
+      // eslint-disable-next-line global-require,@typescript-eslint/no-var-requires
+      MaybeReactDOM18 = (await require('react-dom/client')) as ReactDOM18;
+    } catch {
+      MaybeReactDOM18 = ReactDOM as ReactDOM18;
+    }
+    checkedFor18 = true;
+  }
+  const { createRoot = createRootFake } = MaybeReactDOM18;
+  return createRoot;
+};