chore(frontend): use createRoot from React 18 (aws-samples#78)

Author: trivikr

packages/frontend/package.json

@@ -59,8 +59,8 @@
   "devDependencies": {
     "@types/node": "16.11.43",
     "@types/reach__router": "1.3.6",
-    "@types/react": "18.0.15",
-    "@types/react-dom": "18.0.6",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react-refresh": "1.3.6",
     "react-bootstrap-icons": "1.3.0",
     "typescript": "~4.4.4",

packages/frontend/src/index.tsx

@@ -1,7 +1,7 @@
 import { Buffer } from "buffer";
 import process from "process";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Routes } from "./Routes";
 
 // Polyfills required for MicrophoneStream
@@ -15,9 +15,10 @@ if (typeof (window as any).process === "undefined") {
   (window as any).process = process;
 }
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(
   <div className="container" style={{ height: "100vh" }}>
     <Routes />
-  </div>,
-  document.getElementById("root")
+  </div>
 );

yarn.lock

@@ -129,8 +129,8 @@ __metadata:
     "@reach/router": 1.3.4
     "@types/node": 16.11.43
     "@types/reach__router": 1.3.6
-    "@types/react": 18.0.15
-    "@types/react-dom": 18.0.6
+    "@types/react": ^18.0.15
+    "@types/react-dom": ^18.0.6
     "@vitejs/plugin-react-refresh": 1.3.6
     buffer: 6.0.3
     microphone-stream: 6.0.1
@@ -1958,7 +1958,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:18.0.6":
+"@types/react-dom@npm:^18.0.6":
   version: 18.0.6
   resolution: "@types/react-dom@npm:18.0.6"
   dependencies:
@@ -1986,24 +1986,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:18.0.15":
-  version: 18.0.15
-  resolution: "@types/react@npm:18.0.15"
+"@types/react@npm:^16.9.35":
+  version: 16.14.2
+  resolution: "@types/react@npm:16.14.2"
   dependencies:
     "@types/prop-types": "*"
-    "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: e22cc388d1c145aa184787e44dc28db4789976c704cd5db475c170bb76a560eb81def5f346cfe750949bb3d43ad88822b8cbb9f19b1286e3795892a8263e7715
+  checksum: 1be44c708f3e6e2597223806d83590dae68f296cef8e3ddc6696440c4f2f66775e62f9c46f5e210c29dd13729937923fc50d26aea60d3ed59e8585039cfa4c54
   languageName: node
   linkType: hard
 
-"@types/react@npm:^16.9.35":
-  version: 16.14.2
-  resolution: "@types/react@npm:16.14.2"
+"@types/react@npm:^18.0.15":
+  version: 18.0.17
+  resolution: "@types/react@npm:18.0.17"
   dependencies:
     "@types/prop-types": "*"
+    "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: 1be44c708f3e6e2597223806d83590dae68f296cef8e3ddc6696440c4f2f66775e62f9c46f5e210c29dd13729937923fc50d26aea60d3ed59e8585039cfa4c54
+  checksum: 18cae64f5bfd6bb58fbd8ee2ba52ec82de844f114254e26de7b513e4b86621f643f9b71d7066958cd571b0d78cb86cbceda449c5289f9349ca573df29ab69252
   languageName: node
   linkType: hard