migrate to createRoot #717

Hyperfoil · Oct 4, 2023 · 6c89468 · 6c89468
1 parent 9cacc71
commit 6c89468
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -12,7 +12,6 @@
     "@types/luxon": "3.2.0",
     "@types/react": "17.0.37",
     "@types/react-autosuggest": "10.1.5",
-    "@types/react-dom": "17.0.11",
     "@types/react-redux": "7.1.20",
     "@types/react-router-dom": "5.3.3",
     "@types/react-table": "7.7.14",
@@ -72,6 +71,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-dom": "^18.2.9",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "eslint": "8.49.0",

diff --git a/webapp/src/index.tsx b/webapp/src/index.tsx
@@ -1,12 +1,18 @@
-import ReactDOM from "react-dom"
+import ReactDOM from "react-dom/client"
 
 import "./index.css"
 import App from "./App"
 import * as serviceWorker from "./serviceWorker"
 
 import jsonpath from "jsonpath"
+import React from "react"
 
-ReactDOM.render(<App />, document.getElementById("root"))
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.