Sanity and Next.js 15

[elie222]

This code has a TypeScript error when updating to Next 15 (React 19):

import { TagIcon } from "@sanity/icons";
import { defineField, defineType } from "sanity";

export const categoryType = defineType({
  name: "category",
  title: "Category",
  type: "document",
  icon: TagIcon,
  fields: [
    defineField({
      name: "title",
      type: "string",
    }),
  ],
});

Error:

Type 'ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>' is not assignable to type 'ReactNode | ComponentType'.
  Type 'ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>' is not assignable to type 'FunctionComponent<{}>'.
    Type 'React.ReactNode' is not assignable to type 'import("..../node_modules/.pnpm/@[email protected]/node_modules/@types/react/index").ReactNode'.
      Type 'ReactElement<unknown, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
        Property 'children' is missing in type 'ReactElement<unknown, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2322)

[jordanl17]

Hi elie222 thank you for reporting.

Have you followed at all the details outlined here related to upgrading to React v19 - https://www.sanity.io/help/react-19

[paulmains-epam]

I can confirm I also have the same issue. I was playing around with this repo https://github.com/sanity-io/sanity-template-vercel-visual-editing upgrading it the newest versions. I followed the guidance in the react 19 upgrade page referenced. But the issue persists. I'm just commenting out all icons in the schemas currently.

[elie222]

Sorry, I actually solved this. I think I hadn't updated on my packages.

[jordanl17]

Thanks for joining this issue @paulmains-epam.

I have tried a fresh Next.js 15 and React 19 with embedded Sanity Studio and didn't encounter these issues.

We've narrowed this issue, at least in @elie222 case down to ReactPortal (https://github.com/tajo/react-portal#readme) which hasn't receive updates for many years and guarantees support only up to React 16. Perhaps you could look for an alternative. Because of this, it's quite likely there are multiple version of @types/react being used in your build? You could verify with npm ls @types/react to see if there's any use of a version <18.x.x

[paulmains-epam]

Thanks for joining this issue @paulmains-epam.I have tried a fresh Next.js 15 and React 19 with embedded Sanity Studio and didn't encounter these issues.We've narrowed this issue, at least in @elie222 case down to ReactPortal (https://github.com/tajo/react-portal#readme) which hasn't receive updates for many years and guarantees support only up to React 16. Perhaps you could look for an alternative. Because of this, it's quite likely there are multiple version of @types/react being used in your build? You could verify with npm ls @types/react to see if there's any use of a version <18.x.x

Yes I believe you're correct. Upon further investigation I had some peer dependency issues that weren't being highlighted. I'm not sure which package it was in hindsight, but it was pulling in v16 react types. I've re-setup the codebase a few different times since I first saw the issue. It's not happened again.