diff --git a/src/ReactHTMLElement.ts b/src/ReactHTMLElement.ts
index f52b015..804b58f 100644
--- a/src/ReactHTMLElement.ts
+++ b/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[0][number];
type ReactHTMLElementDOMRoot = Pick;
@@ -42,10 +42,10 @@ class ReactHTMLElement extends HTMLElement {
this._mountPoint = mount;
}
- root(): ReactHTMLElementDOMRoot {
+ async root(): Promise {
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 {
+ const root = await this.root();
root.render(app);
}
diff --git a/src/react-dom-client.ts b/src/react-dom-client.ts
index 1721145..0c922cb 100644
--- a/src/react-dom-client.ts
+++ b/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;
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;
+};