LMS Platform Hydration error · University of Code

LMS Platform Hydration error

Hey everyone, can I please get some help with a hydration error in my Next.js + Sanity project?

I’ve been following Sonny Sangha’s tutorial and everything was going well until I reached the Sanity Studio section. I’ve been stuck on this the whole night 😅 and I’m not sure if I made a mistake in my setup or if it’s something coming from Sanity’s PortableText renderer.

These are the errors I’m getting:

Error 1:

In HTML, <div> cannot be a descendant of <p>.

This will cause a hydration error.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Error 2:

<p> cannot contain a nested <div>.

See this log for the ancestor stack trace.

The error points to my app/studio/[[...tool]]/page.tsx file, but my file is literally just:

import { NextStudio } from "next-sanity/studio";

import config from "../../../sanity.config";

export const dynamic = "force-static";

export { metadata, viewport } from "next-sanity/studio";

export default function StudioPage() {

return <NextStudio config={config} />;

}

I also tried searching for solutions, and some AIs say the issue might be coming from Sanity’s PortableText blockquote renderer, which auto-generates HTML that causes <p> tags to wrap <div>s.

I’m not sure whether I installed something wrong, misconfigured Sanity, or if this is a known issue.

If anyone has seen this before or knows how to fix it, I’d really appreciate the help 🙏

7 comments