react 18 upgrade

Author: zoran995

lib/Views/render.jsx

@@ -1,42 +1,18 @@
-import ReactDOM from "react-dom";
-import RedBox from "redbox-react";
-import React from "react";
+import { createRoot } from "react-dom/client";
+
 import Variables from "../Styles/variables.scss";
 import UI from "./UserInterface";
 
 export default function renderUi(terria, allBaseMaps, viewState) {
-  let render = () => {
-    ReactDOM.render(
-      <UI
-        terria={terria}
-        allBaseMaps={allBaseMaps}
-        viewState={viewState}
-        themeOverrides={Variables}
-      />,
-      document.getElementById("ui")
-    );
-  };
-
-  if (module.hot && process.env.NODE_ENV !== "production") {
-    // Support hot reloading of components
-    // and display an overlay for runtime errors
-    const renderApp = render;
-    const renderError = (error) => {
-      console.error(error);
-      console.error(error.stack);
-      ReactDOM.render(<RedBox error={error} />, document.getElementById("ui"));
-    };
-    render = () => {
-      try {
-        renderApp();
-      } catch (error) {
-        renderError(error);
-      }
-    };
-    module.hot.accept("./UserInterface", () => {
-      setTimeout(render);
-    });
-  }
+  const container = document.getElementById("ui");
+  const root = createRoot(container);
 
-  render();
+  root.render(
+    <UI
+      terria={terria}
+      allBaseMaps={allBaseMaps}
+      viewState={viewState}
+      themeOverrides={Variables}
+    />
+  );
 }

package.json

@@ -34,7 +34,8 @@
   },
   "resolutions": {
     "underscore": "^1.12.1",
-    "@types/react": "^17.0.3",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.1",
     "@types/lodash": "4.14.182",
     "@types/css-font-loading-module": "^0.0.13"
   },
@@ -66,8 +67,8 @@
     "prettier": "2.7.1",
     "pretty-quick": "^4.0.0",
     "prop-types": "^15.6.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "redbox-react": "^1.3.6",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.81.0",