Updated demo app to React 19

Author: dlymonkai

apps/demo-app-video/package.json

@@ -37,9 +37,9 @@
     "@monkvision/types": "5.1.4",
     "@types/babel__core": "^7",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.18",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1",
+    "@types/react-dom": "^19.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/sort-by": "^1",
     "axios": "^1.5.0",
@@ -48,14 +48,14 @@
     "jest-watch-typeahead": "^2.2.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.1",
+    "react-dom": "^19.1",
     "react-i18next": "^13.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "sort-by": "^1.2.0",
     "source-map-explorer": "^2.5.3",
-    "typescript": "^4.9.5",
+    "typescript": "^5.9.2",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

apps/demo-app-video/src/index.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { MonitoringProvider } from '@monkvision/monitoring';
 import { AnalyticsProvider } from '@monkvision/analytics';
 import { Auth0Provider } from '@auth0/auth0-react';
@@ -9,7 +9,12 @@ import { AppRouter } from './components';
 import './index.css';
 import './i18n';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error("Root container not found. Did you forget <div id='root' /> in index.html?");
+}
+const root = createRoot(container);
+root.render(
   <MonitoringProvider adapter={sentryMonitoringAdapter}>
     <AnalyticsProvider adapter={posthogAnalyticsAdapter}>
       <Auth0Provider
@@ -25,5 +30,4 @@ ReactDOM.render(
       </Auth0Provider>
     </AnalyticsProvider>
   </MonitoringProvider>,
-  document.getElementById('root'),
 );

apps/demo-app/package.json

@@ -37,9 +37,9 @@
     "@monkvision/types": "5.1.4",
     "@types/babel__core": "^7",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.18",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1",
+    "@types/react-dom": "^19.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/sort-by": "^1",
     "axios": "^1.5.0",
@@ -48,14 +48,14 @@
     "jest-watch-typeahead": "^2.2.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.1",
+    "react-dom": "^19.1",
     "react-i18next": "^13.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "sort-by": "^1.2.0",
     "source-map-explorer": "^2.5.3",
-    "typescript": "^4.9.5",
+    "typescript": "^5.9.2",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
@@ -67,10 +67,9 @@
     "@monkvision/prettier-config": "5.1.4",
     "@monkvision/test-utils": "5.1.4",
     "@monkvision/typescript-config": "5.1.4",
-    "@testing-library/dom": "^8.20.0",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^12.1.5",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
@@ -88,7 +87,7 @@
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-utils": "^3.0.0",
-    "jest": "^29.3.1",
+    "jest": "^29.6",
     "prettier": "^2.7.1",
     "regexpp": "^3.2.0",
     "ts-jest": "^29.0.3"

apps/demo-app/src/index.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { MonitoringProvider } from '@monkvision/monitoring';
 import { AnalyticsProvider } from '@monkvision/analytics';
 import { Auth0Provider } from '@auth0/auth0-react';
@@ -9,7 +9,12 @@ import { AppRouter } from './components';
 import './index.css';
 import './i18n';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error("Root container not found. Did you forget <div id='root' /> in index.html?");
+}
+const root = createRoot(container);
+root.render(
   <MonitoringProvider adapter={sentryMonitoringAdapter}>
     <AnalyticsProvider adapter={posthogAnalyticsAdapter}>
       <Auth0Provider
@@ -25,5 +30,4 @@ ReactDOM.render(
       </Auth0Provider>
     </AnalyticsProvider>
   </MonitoringProvider>,
-  document.getElementById('root'),
 );