Update react 18 (#141)

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

Dockerfile

@@ -6,6 +6,8 @@ ENV PATH=/app/node_modules/.bin:$PATH
 COPY package.json ./
 COPY yarn.lock ./
 
+# https://yarnpkg.com/corepack
+RUN corepack enable
 RUN yarn install --frozen-lockfile
 
 FROM install AS development

package.json

@@ -16,29 +16,28 @@
     "@mui/material": "^6.1.8",
     "@mui/styles": "^6.1.8",
     "@types/jest": "^29.5.14",
-    "@types/jszip": "^3.4.1",
     "@types/node": "^22.1.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^10.0.0",
     "clipboardy": "^4.0.0",
     "dequal": "^2.0.3",
     "file-saver": "^2.0.5",
-    "i18next": "^22.5.1",
-    "i18next-browser-languagedetector": "^6.1.8",
+    "i18next": "^24.0.2",
+    "i18next-browser-languagedetector": "^8.0.0",
     "jspdf": "^2.5.2",
     "jszip": "^3.10.1",
     "konva": "^9.3.16",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-color": "^2.19.3",
-    "react-dom": "^17.0.2",
-    "react-i18next": "^12.3.1",
-    "react-konva": "^17.0.2-4",
-    "react-router-dom": "^6.8.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^15.1.1",
+    "react-konva": "^18.2.10",
+    "react-router-dom": "^7.0.1",
     "react-scripts": "5.0.1",
     "swr": "^2.2.5",
-    "typescript": "^4.9.5",
+    "typescript": "^5.7.2",
     "use-image": "^1.1.1",
     "uuid": "^11.0.3",
     "web-vitals": "^1.0.1"
@@ -71,12 +70,13 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^12.1.10",
+    "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/file-saver": "^2.0.7",
-    "@types/react-color": "^3.0.4",
-    "i18next-parser": "^4.2.0",
-    "yarn-audit-fix": "^10.1.0"
-  }
+    "@types/react-color": "^3.0.12",
+    "i18next-parser": "^9.0.2"
+  },
+  "packageManager": "[email protected]"
 }

src/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
 import App from './App';
 import { ThemeProvider } from '@mui/material';
@@ -9,8 +9,12 @@ import './locales';
 import i18next from './i18n';
 import { HashRouter } from "react-router-dom";
 
-ReactDOM.render(
-  <React.StrictMode>
+const domNode = document.getElementById('arasaac-pictogram-viewer-react');
+
+if(domNode) {
+  const root = createRoot(domNode);
+  root.render(
+    <React.StrictMode>
     <ThemeProvider theme={theme}>
       <I18nextProvider i18n={i18next}>
         <ScopedCssBaseline>
@@ -20,7 +24,6 @@ ReactDOM.render(
         </ScopedCssBaseline>
       </I18nextProvider>
     </ThemeProvider>
-  </React.StrictMode>,
-  document.getElementById('arasaac-pictogram-viewer-react')
-);
-
+    </React.StrictMode>
+  )
+}