feat: support react 19

apps/next/package.json

@@ -15,28 +15,28 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@sanity/client": "^6.22.2",
-    "@sanity/preview-url-secret": "^2.0.0",
-    "@sanity/react-loader": "^1.10.10",
-    "@sanity/vision": "^3.62.0",
+    "@sanity/client": "^6.24.1",
+    "@sanity/preview-url-secret": "^2.0.5",
+    "@sanity/react-loader": "^1.10.30",
+    "@sanity/vision": "^3.68.1",
     "@tailwindcss/typography": "0.5.15",
     "@tinloof/sanity-studio": "workspace:*",
     "@tinloof/sanity-web": "workspace:*",
     "classnames": "2.5.1",
     "lucide-react": "^0.453.0",
-    "next": "15.0.0",
-    "next-sanity": "9.7.0-canary.25",
-    "react": "19.0.0-rc-65a56d0e-20241020",
-    "react-dom": "19.0.0-rc-65a56d0e-20241020",
-    "sanity": "^3.62.0",
+    "next": "15.1.1",
+    "next-sanity": "^9.8.27",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sanity": "^3.68.1",
     "server-only": "0.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "10.4.20",
     "eslint": "^8.57.0",
-    "eslint-config-next": "15.0.0",
+    "eslint-config-next": "15.1.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "12.1.1",

apps/studio/package.json

@@ -15,12 +15,12 @@
     "sanity"
   ],
   "dependencies": {
-    "@sanity/vision": "^3.62.0",
+    "@sanity/vision": "^3.68.1",
     "@tinloof/sanity-studio": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "sanity": "^3.62.0",
+    "sanity": "^3.68.1",
     "styled-components": "^6.1.13"
   },
   "devDependencies": {

examples/hello-world/package.json

@@ -15,26 +15,26 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@sanity/client": "^6.22.2",
-    "@sanity/preview-url-secret": "^2.0.0",
-    "@sanity/vision": "^3.62.0",
+    "@sanity/client": "^6.24.1",
+    "@sanity/preview-url-secret": "^2.0.5",
+    "@sanity/vision": "^3.68.1",
     "@tailwindcss/typography": "0.5.15",
     "@tinloof/sanity-studio": "workspace:*",
     "classnames": "2.5.1",
     "lucide-react": "^0.453.0",
-    "next": "15.0.0",
-    "next-sanity": "9.7.0-canary.25",
+    "next": "15.1.1",
+    "next-sanity": "^9.8.27",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sanity": "^3.62.0",
+    "sanity": "^3.68.1",
     "server-only": "0.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "10.4.20",
     "eslint": "^8.57.0",
-    "eslint-config-next": "15.0.0",
+    "eslint-config-next": "15.1.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "12.1.1",

examples/with-i18n/package.json

@@ -15,26 +15,26 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@sanity/client": "^6.22.2",
-    "@sanity/preview-url-secret": "^2.0.0",
-    "@sanity/vision": "^3.62.0",
+    "@sanity/client": "^6.24.1",
+    "@sanity/preview-url-secret": "^2.0.5",
+    "@sanity/vision": "^3.68.1",
     "@tailwindcss/typography": "0.5.15",
     "@tinloof/sanity-studio": "workspace:*",
     "classnames": "2.5.1",
     "lucide-react": "^0.453.0",
-    "next": "15.0.0",
-    "next-sanity": "9.7.0-canary.25",
+    "next": "15.1.1",
+    "next-sanity": "^9.8.27",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sanity": "^3.62.0",
+    "sanity": "^3.68.1",
     "server-only": "0.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "10.4.20",
     "eslint": "^8.57.0",
-    "eslint-config-next": "15.0.0",
+    "eslint-config-next": "15.1.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "12.1.1",

examples/with-sections/package.json

@@ -16,26 +16,26 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.5",
-    "@sanity/client": "^6.22.2",
-    "@sanity/preview-url-secret": "^2.0.0",
-    "@sanity/vision": "^3.62.0",
+    "@sanity/client": "^6.24.1",
+    "@sanity/preview-url-secret": "^2.0.5",
+    "@sanity/vision": "^3.68.1",
     "@tailwindcss/typography": "0.5.15",
     "@tinloof/sanity-studio": "workspace:*",
     "classnames": "2.5.1",
     "lucide-react": "^0.453.0",
-    "next": "15.0.0",
-    "next-sanity": "9.7.0-canary.25",
+    "next": "15.1.1",
+    "next-sanity": "^9.8.27",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sanity": "^3.62.0",
+    "sanity": "^3.68.1",
     "server-only": "0.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "10.4.20",
     "eslint": "^8.57.0",
-    "eslint-config-next": "15.0.0",
+    "eslint-config-next": "15.1.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "12.1.1",

package.json

@@ -18,7 +18,7 @@
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "pnpm@8.9.0",
+  "packageManager": "pnpm@9.15.0",
   "dependencies": {
     "@changesets/cli": "^2.27.1",
     "prettier": "^3.2.5",

packages/sanity-studio/package.json

@@ -51,26 +51,25 @@
   },
   "dependencies": {
     "@sanity/asset-utils": "^1.3.0",
-    "@sanity/document-internationalization": "^3.0.1",
-    "@sanity/icons": "^3.2.0",
-    "@sanity/image-url": "^1.0.2",
-    "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/presentation": "^1.16.5",
-    "@sanity/ui": "^2.8.10",
-    "@sanity/util": "^3.57.4",
+    "@sanity/document-internationalization": "^3.2.1",
+    "@sanity/icons": "^3.5.3",
+    "@sanity/image-url": "^1.1.0",
+    "@sanity/incompatible-plugin": "^1.0.5",
+    "@sanity/presentation": "^1.19.13",
+    "@sanity/ui": "^2.10.11",
+    "@sanity/util": "^3.68.1",
     "@tanstack/react-virtual": "^3.10.8",
     "@tinloof/sanity-web": "workspace:*",
     "lodash": "^4.17.21",
     "nanoid": "^5.0.7",
-    "react-rx": "^2.1.3",
-    "use-debounce": "^10.0.3"
+    "react-rx": "^4.1.9",
+    "use-debounce": "^10.0.4"
   },
   "devDependencies": {
-    "@sanity/pkg-utils": "^6.11.4",
+    "@sanity/pkg-utils": "^6.12.1",
     "@sanity/plugin-kit": "^4.0.18",
     "@types/lodash": "^4.17.7",
     "@types/react-is": "^18.3.0",
-    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "eslint": "^8.57.0",
@@ -91,8 +90,8 @@
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "sanity": "^3.62.0"
+    "react": "^18.3.1 || ^19",
+    "sanity": "^3.68.1"
   },
   "engines": {
     "node": ">=14"

packages/sanity-studio/src/plugins/navigator/components/Preview.tsx

@@ -3,7 +3,7 @@ import { DocumentIcon } from "@sanity/icons";
 import imageUrlBuilder from "@sanity/image-url";
 import React, { useMemo } from "react";
 import { isValidElementType } from "react-is";
-import { useMemoObservable } from "react-rx";
+import { useObservable } from "react-rx";
 import {
   getPreviewStateObservable,
   getPreviewValueWithFallback,
@@ -49,10 +49,17 @@ const Preview = ({
   fallback?: React.ReactNode | string;
 }) => {
   const documentPreviewStore = useDocumentPreviewStore();
-  const previewState = useMemoObservable(
-    () =>
-      getPreviewStateObservable(documentPreviewStore, schemaType, item._id, ""),
-    [item._id, documentPreviewStore, schemaType]
+  const previewState = useObservable(
+    useMemo(
+      () =>
+        getPreviewStateObservable(
+          documentPreviewStore,
+          schemaType,
+          item._id,
+          "",
+        ),
+      [item._id, documentPreviewStore, schemaType],
+    ),
   );
 
   const draft = previewState?.draft;
@@ -147,7 +154,7 @@ const PreviewMedia = (props: SanityDefaultPreviewProps): React.ReactElement => {
           src={
             imageBuilder
               .image(
-                mediaProp as SanityImageSource /*will only enter this code path if it's compatible*/
+                mediaProp as SanityImageSource /*will only enter this code path if it's compatible*/,
               )
               .width(dimensions?.width || 100)
               .height(dimensions.height || 100)
@@ -158,7 +165,7 @@ const PreviewMedia = (props: SanityDefaultPreviewProps): React.ReactElement => {
         />
       );
     },
-    [imageBuilder, mediaProp, title]
+    [imageBuilder, mediaProp, title],
   );
 
   const renderIcon = React.useCallback(() => {

packages/sanity-studio/src/plugins/navigator/utils/index.tsx

@@ -1,5 +1,6 @@
 import { capitalize } from "lodash";
-import { useMemoObservable } from "react-rx";
+import { useMemo } from "react";
+import { useObservable } from "react-rx";
 import { QueryParams, useDocumentStore } from "sanity";
 
 import {
@@ -18,12 +19,14 @@ export const useSanityFetch = ({
   variables: QueryParams;
 }) => {
   const documentStore = useDocumentStore();
-  const subscribe = useMemoObservable(
-    () =>
-      documentStore.listenQuery(query, variables, {
-        perspective: "previewDrafts",
-      }),
-    [documentStore]
+  const subscribe = useObservable(
+    useMemo(
+      () =>
+        documentStore.listenQuery(query, variables, {
+          perspective: "previewDrafts",
+        }),
+      [documentStore, query, variables],
+    ),
   );
 
   const loading = subscribe === undefined;
@@ -152,7 +155,7 @@ export function createPageTemplates(creatablePages: NormalizedCreatablePage[]) {
 }
 
 export function normalizeCreatablePages(
-  creatablePageTypes: PagesNavigatorPluginOptions["creatablePages"]
+  creatablePageTypes: PagesNavigatorPluginOptions["creatablePages"],
 ): NormalizedCreatablePage[] {
   return (
     creatablePageTypes?.map((page) => {

packages/sanity-web/package.json

@@ -30,14 +30,14 @@
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.3.1 || ^19",
+    "react-dom": "^18.3.1 || ^19"
   },
   "dependencies": {
-    "@portabletext/react": "^3.1.0",
+    "@portabletext/react": "^3.2.0",
     "@sanity/asset-utils": "^1.3.0",
-    "@sanity/image-url": "^1.0.2",
-    "sanity": "^3.62.0",
+    "@sanity/image-url": "^1.1.0",
+    "sanity": "^3.68.1",
     "speakingurl": "^14.0.1"
   }
 }