chore(deps): bump to react 18

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

3 files changed, 36 insertions, 24 deletions

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 6358009..2a83a1f 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -13,35 +13,35 @@
     "@emotion/styled": "^11.8.1",
     "@fontsource/roboto": "^4.5.5",
     "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.6.2",
+    "@mui/material": "^5.6.4",
     "@sophie/shared": "workspace:*",
-    "i18next": "^21.6.16",
+    "i18next": "^21.7.1",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.8.0",
     "loglevel-plugin-prefix": "^0.8.4",
     "mobx": "^6.5.0",
-    "mobx-react-lite": "^3.3.0",
-    "mobx-state-tree": "^5.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-i18next": "^11.16.7",
+    "mobx-react-lite": "^3.4.0",
+    "mobx-state-tree": "^5.1.4",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-i18next": "^11.16.9",
     "stylis": "^4.1.1",
     "stylis-plugin-rtl": "^2.1.1"
   },
   "devDependencies": {
-    "@jest/globals": "^28.0.3",
+    "@jest/globals": "^28.1.0",
     "@types/jest": "^27.5.0",
     "@types/lodash-es": "^4.17.6",
-    "@types/react": "^17.0.44",
-    "@types/react-dom": "^17.0.15",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.3",
     "@types/stylis": "^4.0.2",
     "@vitejs/plugin-react": "^1.3.2",
-    "jest": "^28.0.3",
-    "jest-environment-jsdom": "^28.0.2",
-    "jest-mock": "^28.0.2",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "jest-mock": "^28.1.0",
     "jsdom": "^19.0.0",
-    "mst-middlewares": "^5.1.3",
+    "mst-middlewares": "^5.1.4",
     "remotedev": "^0.2.9",
-    "vite": "^2.9.7"
+    "vite": "^2.9.8"
   }
 }
diff --git a/packages/renderer/src/components/banner/NewWindowBanner.tsx b/packages/renderer/src/components/banner/NewWindowBanner.tsx
index 07fafda..685badf 100644
--- a/packages/renderer/src/components/banner/NewWindowBanner.tsx
+++ b/packages/renderer/src/components/banner/NewWindowBanner.tsx
@@ -96,14 +96,20 @@ function NewWindowBanner({
       }
     >
       {count === 1 ? (
-        <Trans i18nKey="messageSingleLink" t={t}>
-          {{ name }} wants to open <strong>{{ url }}</strong> in a new window
-        </Trans>
+        <Trans
+          i18nKey="messageSingleLink"
+          t={t}
+          components={[<strong>url</strong>]}
+          values={{ name, url }}
+        />
       ) : (
-        <Trans i18nKey="messageMultipleLinks" count={count - 1} t={t}>
-          {{ name }} wants to open <strong>{{ url }}</strong> and{' '}
-          <strong>{{ count: count - 1 }}</strong> other links in new windows
-        </Trans>
+        <Trans
+          i18nKey="messageMultipleLinks"
+          count={count - 1}
+          t={t}
+          components={[<strong>url</strong>, <strong>count</strong>]}
+          values={{ name, url, count: count - 1 }}
+        />
       )}
     </NotificationBanner>
   );
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 72a9ffd..726e00e 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -26,7 +26,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import { autorun } from 'mobx';
 import { addDisposer } from 'mobx-state-tree';
 import React, { Suspense, lazy } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import Loading from './components/Loading';
 import StoreProvider from './components/StoreProvider';
@@ -88,4 +88,10 @@ function Root(): JSX.Element {
   );
 }
 
-render(<Root />, document.querySelector('#app'));
+const rootElement = document.querySelector('#app');
+if (rootElement === null) {
+  log.error('Root element not found');
+} else {
+  const root = createRoot(rootElement);
+  root.render(<Root />);
+}