Hydration error: <div> cannot be a descendant of <p> Next.js Origin: On your device Last updated 5 Nov 2026

Next.js: Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p> / In HTML, <p> cannot be a descendant of <p>. This will cause a hydration error

The rendered HTML has an invalid element nesting, so the browser "fixes" it and React's hydration no longer matches.

Exact message you may see In HTML, <div> cannot be a descendant of <p>. This will cause a hydration errorIn HTML, <p> cannot be a descendant of <p>In HTML, <a> cannot be a descendant of <a>In HTML, <tr> cannot be a child of <table>
Explore the map of this error Full error map →
Seen on: Next.js React

Meaning

Browsers auto-correct invalid markup (a <div> inside <p>, <a> inside <a>, <tr> outside <tbody>), so the DOM differs from what React rendered on the server. Fix the structure: use <span>/<div> correctly, don't nest links or paragraphs, wrap table rows in <tbody>.

Common causes

  • <div> or <p> inside a <p>
  • <a> inside <a> (Link inside a clickable card)
  • <tr> without <tbody>
  • Block elements inside <button>
  • Markdown/CMS content rendered into a <p>

⚡ Quick fix

  1. Change the outer <p> to a <div>
  2. Remove nested links/buttons
  3. Check the error overlay's component stack for the exact elements

Detailed fix by platform

Next.js

  1. In dev the overlay prints the nesting path, e.g. <p> <div>; fix the first invalid parent

How to diagnose

  1. Elements — Which nesting?
  2. Source — Markdown/CMS?
  3. Table — tbody present?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

[Vue warn]: Hydration node/text/children mismatch — Vue: [Vue warn]: Hydration text content mismatch / Hydration node mismatch: server rendered element contains more child nodes than client vdom (Vue)[Vue warn]: Hydration…Conflicting app and page file was found — Next.js: ⨯ Conflicting app and page file was found, please remove the conflicting files to continue: "pages/index.tsx" - "app/page.tsx" (Next.js)Conflicting app and p…CORS error calling Next.js API route / route handler — Browser: Access to fetch at 'https://api.example.com/api/data' from origin 'https://app.example.com' has been blocked by CORS policy (Next.js route handler) (Next.js)CORS error calling Ne…Hydration failed — Error: Hydration failed because the initial UI does not match what was rendered on the server (React)Hydration failedneeds useState — You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client" (React)needs useStatenext build: fetch failed ECONNREFUSED (build-time API) — Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 } (Next.js)next build: fetch fai…next build: JavaScript heap out of memory — Next.js: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (during next build) (Next.js)next build: JavaScrip…Nuxt: Hydration completed but contained mismatches — Nuxt: [Vue warn]: Hydration completed but contains mismatches. (Vue)Nuxt: Hydration compl…Hydration…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.