React 18 upgrade (#755)

* react 18 upgrade
* flush sync root render
* update after review
* use terriajs 8.10.0

Author: zoran995

lib/Views/render.jsx

@@ -1,42 +1,21 @@
-import ReactDOM from "react-dom";
-import RedBox from "redbox-react";
-import React from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
 import Variables from "../Styles/variables.scss";
 import UI from "./UserInterface";
 
 export default function renderUi(terria, allBaseMaps, viewState) {
-  let render = () => {
-    ReactDOM.render(
+  const container = document.getElementById("ui");
+  const root = createRoot(container);
+
+  // Ensure that the initial render is synchronous so there is no a white flash visible between loading and rendering
+  flushSync(() =>
+    root.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);
-    });
-  }
-
-  render();
+      />
+    )
+  );
 }

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",
     "@types/node": "^22.13.1"
@@ -67,15 +68,14 @@
     "prettier": "2.7.1",
     "pretty-quick": "^4.0.0",
     "prop-types": "^15.6.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "redbox-react": "^1.3.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.81.0",
     "sass-loader": "^16.0.3",
     "style-loader": "^4.0.0",
     "svg-sprite-loader": "^6.0.11",
-    "terriajs": "8.9.5",
+    "terriajs": "8.10.0",
     "terriajs-cesium": "8.0.2",
     "terriajs-plugin-api": "0.0.1-alpha.17",
     "terriajs-plugin-sample": "0.0.1-alpha.7",