WIP(ui-source-code-editor): rewrite import condition

instructure · Feb 19, 2024 · cda998a · cda998a
1 parent 594086b
commit cda998a
Showing 1 changed file with 12 additions and 36 deletions.
diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/SearchPanel.tsx b/packages/ui-source-code-editor/src/SourceCodeEditor/SearchPanel.tsx
@@ -41,10 +41,6 @@ import {
 } from '@instructure/ui-icons'
 
 import ReactDOM from 'react-dom'
-const createRoot = async () => {
-  // eslint-disable-next-line import/no-unresolved
-  return import('react-dom/client')
-}
 
 export type SearchConfig = {
   placeholder: string
@@ -143,43 +139,23 @@ export default function customSearch(searchConfig: SearchConfig | undefined) {
         createPanel: (view) => {
           const dom = document.createElement('div')
           dom.style.padding = '8px'
-          createRoot()
-            .then((res) => {
-              let err: unknown
-              try {
-                const root = res!.createRoot(dom)
+          if (!React.version.startsWith('16.')) {
+            import('react-dom/client')
+              .then((r) => {
+                const root = r.createRoot(dom)
                 root.render(
                   <SearchPanel view={view} searchConfig={searchConfig} />
                 )
-              } catch (error) {
-                err = error
-              }
-              // this timeout is needed because Root.render() seems to cause
-              // prop validation to be emitted a frame later
-              setTimeout(() => {
-                if (err) {
-                  console.error(err)
-                }
               })
-            })
-            .catch(() => {
-              // react-dom/client does not exist, its React 16 or 17
-              let error: unknown
-              setTimeout(() => {
-                try {
-                  ReactDOM.render(
-                    <SearchPanel view={view} searchConfig={searchConfig} />,
-                    dom
-                  )
-                } catch (e) {
-                  // catch unhandled errors
-                  error = e
-                }
-                if (error) {
-                  console.error(error)
-                }
+              .catch((e) => {
+                console.error(e)
               })
-            })
+          } else {
+            ReactDOM.render(
+              <SearchPanel view={view} searchConfig={searchConfig} />,
+              dom
+            )
+          }
           return { dom }
         }
       })