feat: ⬆️ Upgrade to React 19

invokeai/frontend/web/eslint.config.mjs

@@ -50,13 +50,14 @@ export default [
       ...typescriptEslint.configs.recommended.rules,
       ...pluginReact.configs.recommended.rules,
       ...pluginReact.configs['jsx-runtime'].rules,
-      ...pluginReactHooks.configs.recommended.rules,
+      ...pluginReactHooks.configs['recommended-latest'].rules,
       ...pluginStorybook.configs.recommended.rules,
 
       'react/jsx-no-bind': [
         'error',
         {
           allowBind: true,
+          allowArrowFunctions: true,
         },
       ],
 

invokeai/frontend/web/knip.ts

@@ -20,7 +20,7 @@ const config: KnipConfig = {
     'src/services/api/endpoints/auth.ts',
   ],
   ignoreBinaries: ['only-allow'],
-  ignoreDependencies: ['magic-string'],
+  ignoreDependencies: ['magic-string', '@babel/preset-typescript', 'babel-plugin-react-compiler'],
   paths: {
     'public/*': ['public/*'],
   },

invokeai/frontend/web/package.json

@@ -40,120 +40,131 @@
     "test:no-watch": "vitest --no-watch"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.1",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.2",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@dagrejs/dagre": "^1.1.5",
+    "@dagrejs/dagre": "^1.1.8",
     "@dagrejs/graphlib": "^2.2.4",
-    "@fontsource-variable/inter": "^5.2.6",
+    "@fontsource-variable/inter": "^5.2.8",
     "@invoke-ai/ui-library": "github:invoke-ai/ui-library#v0.0.48",
-    "@nanostores/react": "^1.0.0",
-    "@observ33r/object-equals": "^1.1.5",
+    "@nanostores/react": "^1.1.0",
+    "@observ33r/object-equals": "^1.1.6",
     "@reduxjs/toolkit": "2.8.2",
     "@roarr/browser-log-writer": "^1.3.0",
-    "@xyflow/react": "^12.8.2",
-    "ag-psd": "^28.2.2",
+    "@xyflow/react": "^12.10.0",
+    "ag-psd": "^28.5.1",
     "async-mutex": "^0.5.0",
-    "chakra-react-select": "^4.9.2",
+    "chakra-react-select": "^4.10.1",
     "cmdk": "^1.1.1",
     "compare-versions": "^6.1.1",
-    "dockview": "^4.7.1",
-    "es-toolkit": "^1.39.7",
+    "dockview": "^4.12.0",
+    "es-toolkit": "^1.46.1",
     "filesize": "^10.1.6",
-    "fracturedjsonjs": "^4.1.0",
-    "framer-motion": "^11.10.0",
-    "i18next": "^25.3.2",
+    "fracturedjsonjs": "^4.1.1",
+    "framer-motion": "^11.18.2",
+    "i18next": "^25.7.3",
     "i18next-http-backend": "^3.0.2",
     "idb-keyval": "6.2.1",
     "jsondiffpatch": "^0.7.3",
     "jszip": "^3.10.1",
     "konva": "^9.3.22",
-    "linkify-react": "^4.3.1",
-    "linkifyjs": "^4.3.1",
-    "lru-cache": "^11.1.0",
+    "linkify-react": "^4.3.2",
+    "linkifyjs": "^4.3.2",
+    "lru-cache": "^11.2.4",
     "mtwist": "^1.0.2",
-    "nanoid": "^5.1.5",
-    "nanostores": "^1.0.1",
+    "nanoid": "^5.1.6",
+    "nanostores": "^1.3.0",
     "new-github-issue-url": "^1.1.0",
-    "overlayscrollbars": "^2.11.4",
+    "overlayscrollbars": "^2.13.0",
     "overlayscrollbars-react": "^0.5.6",
     "perfect-freehand": "^1.2.2",
-    "query-string": "^9.2.1",
+    "query-string": "^9.3.1",
     "raf-throttle": "^2.0.6",
-    "react": "^18.3.1",
-    "react-colorful": "^5.6.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.6",
+    "react-colorful": "^5.7.0",
+    "react-dom": "^19.2.6",
     "react-dropzone": "^14.3.8",
-    "react-error-boundary": "^5.0.0",
-    "react-hook-form": "^7.60.0",
+    "react-error-boundary": "^6.0.0",
+    "react-hook-form": "^7.69.0",
     "react-hotkeys-hook": "4.5.0",
-    "react-i18next": "^15.5.3",
+    "react-i18next": "^16.5.0",
     "react-icons": "^5.5.0",
     "react-redux": "9.2.0",
-    "react-resizable-panels": "^3.0.3",
+    "react-resizable-panels": "^3.0.6",
     "react-router-dom": "^7.12.0",
     "react-textarea-autosize": "^8.5.9",
     "react-use": "^17.6.0",
-    "react-virtuoso": "^4.13.0",
-    "redux-remember": "^5.2.0",
+    "react-virtuoso": "^4.18.6",
+    "redux-remember": "^5.3.0",
     "redux-undo": "^1.1.0",
     "rfdc": "^1.4.1",
-    "roarr": "^7.21.1",
+    "roarr": "^7.21.2",
     "serialize-error": "^12.0.0",
-    "socket.io-client": "^4.8.1",
+    "socket.io-client": "^4.8.3",
     "stable-hash": "^0.0.6",
-    "use-debounce": "^10.0.5",
+    "use-debounce": "^10.0.6",
     "use-device-pixel-ratio": "^1.1.2",
     "uuid": "^11.1.0",
-    "zod": "^4.0.10",
-    "zod-validation-error": "^3.5.2"
+    "zod": "^4.2.1",
+    "zod-validation-error": "^4.0.2"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.2.0 || ^19.1.4",
+    "react-dom": "^18.2.0 || ^19.1.4"
   },
   "devDependencies": {
-    "@eslint/js": "^9.31.0",
-    "@storybook/addon-docs": "^9.0.17",
-    "@storybook/addon-links": "^9.0.17",
-    "@storybook/react-vite": "^9.0.17",
-    "@types/node": "^22.15.1",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@babel/preset-typescript": "^7.29.7",
+    "@eslint/js": "^9.39.2",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-links": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@types/node": "^22.19.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.37.0",
-    "@typescript-eslint/parser": "^8.37.0",
-    "@vitejs/plugin-react-swc": "^3.9.0",
-    "@vitest/coverage-v8": "^3.1.2",
-    "@vitest/ui": "^3.1.2",
-    "concurrently": "^9.1.2",
-    "csstype": "^3.1.3",
+    "@typescript-eslint/eslint-plugin": "^8.59.2",
+    "@typescript-eslint/parser": "^8.59.2",
+    "@vitejs/plugin-react-swc": "^4.3.0",
+    "@vitest/coverage-v8": "^4.1.5",
+    "@vitest/ui": "^4.1.5",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "concurrently": "^9.2.1",
+    "csstype": "^3.2.3",
     "dpdm": "^3.14.0",
-    "eslint": "^9.31.0",
-    "eslint-plugin-i18next": "^6.1.2",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-path": "^2.0.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
-    "eslint-plugin-storybook": "^9.0.17",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "globals": "^16.3.0",
-    "knip": "^5.61.3",
-    "magic-string": "^0.30.17",
+    "eslint": "^9.39.2",
+    "eslint-plugin-i18next": "^6.1.3",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-path": "^2.1.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "eslint-plugin-storybook": "^10.3.6",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "globals": "^16.5.0",
+    "knip": "^5.77.4",
+    "magic-string": "^0.30.21",
     "openapi-types": "^12.1.3",
-    "openapi-typescript": "^7.6.1",
-    "prettier": "^3.5.3",
-    "rollup-plugin-visualizer": "^6.0.3",
-    "storybook": "^9.0.17",
-    "tsafe": "^1.8.5",
-    "type-fest": "^4.40.0",
-    "typescript": "^5.8.3",
-    "vite": "^7.0.5",
+    "openapi-typescript": "^7.10.1",
+    "prettier": "^3.8.3",
+    "rollup-plugin-visualizer": "^6.0.5",
+    "storybook": "^10.3.6",
+    "tsafe": "^1.8.12",
+    "type-fest": "^4.41.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.11",
+    "vite-plugin-babel": "^1.6.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.1.2"
+    "vitest": "^4.1.5"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "react": "19",
+        "react-dom": "19",
+        "zod": "4"
+      }
+    }
   },
   "engines": {
     "pnpm": "10"