Update to React 19

app/package.json

@@ -4,7 +4,7 @@
   "description": "A friendly music sequencer application for OS X and Windows.",
   "scripts": {
     "dev": "vite",
-    "build": "vite build && node generate-service-worker.js",
+    "build": "vite build && node generate-service-worker.mjs",
     "build:electron": "vite build --config vite-electron.config.mts",
     "serve": "npx http-server dist",
     "test": "vitest run",
@@ -64,8 +64,8 @@
     "midifile-ts": "1.5.1",
     "mobx": "^6.13.7",
     "mobx-persist-store": "^1.1.8",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-helmet-async": "^2.0.5",
     "react-number-format": "^5.4.4",
     "react-share": "^5.2.2",
@@ -84,8 +84,8 @@
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.16",
     "@types/node": "^22.15.2",
-    "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.6",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@types/react-helmet": "6.1.11",
     "@types/react-window": "^1.8.8",
     "@types/use-sync-external-store": "^1.5.0",
@@ -97,7 +97,7 @@
     "dotenv": "^17.2.3",
     "globals": "^16.0.0",
     "jsdom": "^28.0.0",
-    "react-refresh": "0.17.0",
+    "react-refresh": "0.18.0",
     "ts-loader": "^9.5.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.31.0",

app/src/components/PianoRollToolbar/PanSlider.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from "@testing-library/react"
+import { render } from "@testing-library/react"
+import { screen } from "@testing-library/dom"
 import userEvent from "@testing-library/user-event"
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest"
 import { LocalizationContext } from "../../localize/useLocalization"

app/src/components/PianoRollToolbar/VolumeSlider.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from "@testing-library/react"
+import { render } from "@testing-library/react"
+import { screen } from "@testing-library/dom"
 import userEvent from "@testing-library/user-event"
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest"
 import { VolumeSlider } from "./VolumeSlider"

app/src/components/inputs/NumberInput.tsx

@@ -28,6 +28,7 @@ export const NumberInput: FC<NumberInputProps> = ({
 }) => {
   return (
     <NumericFormat
+      // @ts-expect-error - React 19 type compatibility issue with react-number-format
       value={value}
       onValueChange={({ floatValue }) => {
         if (floatValue !== undefined) {

app/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "compilerOptions": {
     "types": [
+      "react",
+      "react-dom",
       "node",
       "webmidi",
       "wicg-file-system-access",
@@ -22,6 +24,7 @@
     "resolveJsonModule": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
     "paths": {
       // Avoid referencing the node_modules of the library when developing a local library.
       "@types/react": ["../node_modules/@types/react"]