Upgrading React

Author: stever

apps/play/package.json

@@ -28,6 +28,7 @@
     "@lagunovsky/redux-react-router": "^4.5.0",
     "@zxplay/emulator": "*",
     "@zxplay/i18n": "*",
+    "@zxplay/ui": "*",
     "axios": "^1.12.2",
     "clsx": "^2.1.1",
     "file-dialog": "^0.0.8",
@@ -38,10 +39,10 @@
     "primeicons": "^6.0.1",
     "primereact": "^9.6.4",
     "query-string": "^9.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-redux": "^9.2.0",
-    "react-router-dom": "^6.30.1",
+    "react-router-dom": "^7.9.3",
     "react-titled": "^2.1.0",
     "react-transition-group": "^4.4.5",
     "redux": "^5.0.1",
@@ -67,7 +68,7 @@
     "npm-watch": "^0.13.0",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
-    "react-test-renderer": "^18.3.1",
+    "react-test-renderer": "^19.1.1",
     "sass-loader": "^16.0.4",
     "style-loader": "^4.0.0",
     "svg-inline-loader": "^0.2.3",

apps/play/src/components/App.jsx

@@ -9,7 +9,7 @@ import "primeflex/primeflex.css";
 import ErrorBoundary from "./ErrorBoundary";
 import RenderEmulator from "./RenderEmulator";
 import LoadingScreen from "./LoadingScreen";
-import LockScreen from "./LockScreen";
+import {LockScreen} from "@zxplay/ui";
 import Nav from "./Nav";
 import HomePage from "./HomePage";
 import MaxWidth from "./MaxWidth";

apps/play/webpack.config.js

@@ -69,7 +69,7 @@ module.exports = (env, _) => {
         // emulator package is consumed from source, so transpile it here.
         loaders.push({
             test: /\.jsx?$/,
-            include: /packages[/\\](emulator|i18n)/,
+            include: /packages[/\\](emulator|i18n|ui)/,
             use: babelLoader
         });
     }
@@ -98,18 +98,7 @@ module.exports = (env, _) => {
             resolve: {
                 extensions: ['.js', '.jsx'],
                 alias: {
-                    fs: false,
-                    // Force single copies of React and React Router. apps/play
-                    // is on React 18 / react-router 6, but shares hoisted libs
-                    // (react-redux, @lagunovsky/redux-react-router) with
-                    // apps/web's React 19 / react-router 7 at the repo root.
-                    // Without these aliases both versions get bundled, breaking
-                    // hooks and the Router context ("useNavigate may be used
-                    // only in the context of a <Router>").
-                    react: path.resolve(__dirname, 'node_modules/react'),
-                    'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
-                    'react-router': path.resolve(__dirname, 'node_modules/react-router'),
-                    'react-router-dom': path.resolve(__dirname, 'node_modules/react-router-dom')
+                    fs: false
                 }
             }
         }

apps/web/package.json

@@ -36,6 +36,7 @@
     "@lagunovsky/redux-react-router": "^4.5.0",
     "@zxplay/emulator": "*",
     "@zxplay/i18n": "*",
+    "@zxplay/ui": "*",
     "axios": "^1.12.2",
     "bas2tap": "^0.0.1-alpha.4",
     "clsx": "^2.1.1",

apps/web/src/components/App.jsx

@@ -9,7 +9,7 @@ import "primeflex/primeflex.css";
 import ErrorBoundary from "./ErrorBoundary";
 import RenderEmulator from "./RenderEmulator";
 import LoadingScreen from "./LoadingScreen";
-import LockScreen from "./LockScreen";
+import { LockScreen } from "@zxplay/ui";
 import Nav from "./Nav";
 import HomePage from "./HomePage";
 import MaxWidth from "./MaxWidth";

apps/web/src/components/LockScreen.jsx

@@ -93,7 +93,7 @@ module.exports = (env, _) => {
         // emulator package is consumed from source, so transpile it here.
         loaders.push({
             test: /\.jsx?$/,
-            include: /packages[/\\](emulator|i18n)/,
+            include: /packages[/\\](emulator|i18n|ui)/,
             use: babelLoader
         });
     }