Suspense breaks after update Next.js to 15.1.0
Answered
Acorn Woodpecker posted this in #help-forum
Acorn WoodpeckerOP
My Suspense boundaries break after the update Next.js to 15.1.0 with React 19:
Type error: 'Suspense' cannot be used as a JSX component.
│ Its type 'ExoticComponent<SuspenseProps>' is not a valid JSX element type.
│ Type 'ExoticComponent<SuspenseProps>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
│ Type 'import("/Users/md/Desktop/mgl/node_modules/.pnpm/@types+react@19.0.1/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.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'.
│
│ 21 | </div>
│ 22 |
│ > 23 | <Suspense fallback={…}>
│ | ^
Type error: 'Suspense' cannot be used as a JSX component.
│ Its type 'ExoticComponent<SuspenseProps>' is not a valid JSX element type.
│ Type 'ExoticComponent<SuspenseProps>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
│ Type 'import("/Users/md/Desktop/mgl/node_modules/.pnpm/@types+react@19.0.1/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.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'.
│
│ 21 | </div>
│ 22 |
│ > 23 | <Suspense fallback={…}>
│ | ^
Answered by Acorn Woodpecker
Ok, just FYI, it was my fault. I had some TypeScript misconfiguration in my Turborepo.
5 Replies
can you share the full code to us?
Acorn WoodpeckerOP
Hey @B33fb0n3 , that’s unfortunately not possible. BUT: The project is basically a fork of
https://github.com/sanity-io/sanity-template-nextjs-clean/
I just updated the dependencies to Next.js 15.1, also react and its types (v19)
https://github.com/sanity-io/sanity-template-nextjs-clean/blob/main/nextjs-app/app/page.tsx (you can see the Suspense boundary wrapping AllPosts component)
https://github.com/sanity-io/sanity-template-nextjs-clean/
I just updated the dependencies to Next.js 15.1, also react and its types (v19)
https://github.com/sanity-io/sanity-template-nextjs-clean/blob/main/nextjs-app/app/page.tsx (you can see the Suspense boundary wrapping AllPosts component)
Let me guess: inside that template everything works correct, right?
Acorn WoodpeckerOP
It worked well for my project too, since I just made slight adjustments to css only. So, just the update breaks it
Acorn WoodpeckerOP
Ok, just FYI, it was my fault. I had some TypeScript misconfiguration in my Turborepo.
Answer