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

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
2023-10-19 10:53:42 +02:00
parent 2bbd05cf91
commit 67cc85bb14
3 changed files with 32 additions and 16 deletions
@@ -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'));
+      }
+    });
  }
 }