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.

[Henkisch]

This command solved it for me npm install react react-dom @types/react --save, I had this problem for months and it annoyed me so much, but now it finally seems gone.

[alexanderbnelson]

I still have this issue. Only version of @types/react is the latest. 19.0.1. Tried rm -rf modules and lock file. No luck.

[serge-0v]

I had the same issue with Next.15, React 19 and lucid icons. Worked good in React 19 RC. Then searched lucid icons issues and someone posted that adding "react": ["./node_modules/@types/react"] to tsconfig.json "path" solved it:

"paths": {
    "react": ["./node_modules/@types/react"]
},

And it worked for me.

[gadcam]

One reliable way to fix this is to add an overrides section like this in the package.json

  "overrides": {
    "@types/react": "^19.0.2",
    "@types/react-dom": "^19.0.2"
  }

with the same version you have installed above
Not directly related but note that overriding react-is version might also be helpful in this migration ;)

The packages causing the issue are

• @sanity/block-tools
• @sanity/export
• @sanity/types

[serge-0v]

One reliable way to fix this is to add an overrides section like this in the package.json

  "overrides": {
    "@types/react": "^19.0.2",
    "@types/react-dom": "^19.0.2"
  }

with the same version you have installed above Not directly related but note that overriding react-is version might also be helpful in this migration ;)

The packages causing the issue are

• @sanity/block-tools
• @sanity/export
• @sanity/types

Thanks, @gadcam. This worked for me.

[Iffti2000]

I had the same issue with Next.15, React 19 and lucid icons. Worked good in React 19 RC. Then searched lucid icons issues and someone posted that adding "react": ["./node_modules/@types/react"] to tsconfig.json "path" solved it:

"paths": {
    "react": ["./node_modules/@types/react"]
},

And it worked for me.

Thank you, It worked ❤️

[gadcam]

Might be fixed by #8121