Web: Applied changes to new React v18

packages/client/src/bootstrap.js

@@ -1,9 +1,10 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 //import { registerSW } from "@docspace/common/sw/helper";
-const root = document.getElementById("root");
 
-if (root) ReactDOM.render(<App />, root);
+const container = document.getElementById("root");
+const root = createRoot(container);
+if (root) root.render(<App />);
 
 //registerSW();

packages/editor/src/client/bootstrap.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { hydrate } from "react-dom";
+import { hydrateRoot } from "react-dom/client";
 // import { registerSW } from "@docspace/common/sw/helper";
 import App from "./App.js";
 import pkg from "../../package.json";
@@ -11,17 +11,19 @@ const initialLanguage = window.initialLanguage;
 
 initI18n(initialI18nStoreASC);
 
-hydrate(
-  <React.Suspense fallback={<div></div>}>
-    <App
-      initialLanguage={initialLanguage}
-      initialI18nStoreASC={initialI18nStoreASC}
-      {...propsObj}
-    />
-  </React.Suspense>,
-  document.getElementById("root")
-);
-
+const container = document.getElementById("root");
+if (container) {
+  hydrateRoot(
+    container,
+    <React.Suspense fallback={<div></div>}>
+      <App
+        initialLanguage={initialLanguage}
+        initialI18nStoreASC={initialI18nStoreASC}
+        {...propsObj}
+      />
+    </React.Suspense>
+  );
+}
 if (IS_DEVELOPMENT) {
   const port = PORT || 5013;
   const socketPath = pkg.socketPath;

packages/login/src/client/bootstrap.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { hydrate } from "react-dom";
+import { hydrateRoot } from "react-dom/client";
 // import { registerSW } from "@docspace/common/sw/helper";
 import pkg from "../../package.json";
 import { initI18n } from "./helpers/utils";
@@ -14,15 +14,18 @@ if (isDesktopEditor) typeof window["AscDesktopEditor"];
 
 initI18n(initialI18nStoreASC);
 
-hydrate(
-  <ClientApp
-    initialLanguage={initialLanguage}
-    initialI18nStoreASC={initialI18nStoreASC}
-    isDesktopEditor={isDesktopEditor}
-    {...propsObj}
-  />,
-  document.getElementById("root")
-);
+const container = document.getElementById("root");
+if (container) {
+  hydrateRoot(
+    container,
+    <ClientApp
+      initialLanguage={initialLanguage}
+      initialI18nStoreASC={initialI18nStoreASC}
+      isDesktopEditor={isDesktopEditor}
+      {...propsObj}
+    />
+  );
+}
 
 if (IS_DEVELOPMENT) {
   const port = PORT || 5011;