Debug an error message step by step
I'm getting this error in a Next.js app. Explain in plain words what it means, list the 3 most likely causes in order of likelihood, and for each give the exact check I should do and the fix. Keep the whole answer under 350 words. Error: "Hydration failed because the server rendered HTML didn't match the client. This tree contains: <p> cannot be a descendant of <p>."
Claude Haiku 5.5 · 6.3 s · 917 tokens · temp 0.7
What it means: Next.js rendered your page on the server, then React ran in the browser and built the same page again. The two results didn't match. Here the mismatch is an invalid HTML structure: a <p> element sits inside another <p>. Browsers don't allow that, so when they parse the server HTML they silently restructure it (closing the outer <p> early), and React's client version no longer lines up with what's in the DOM.
Most likely causes, in order:
1. A block element (like <div>, <ul>, or a component that renders one) nested inside a <p>
- Check: Search your components for
<p>and look at what's inside. Pay special attention to children passed into a<p>from a component that renders a<div>,<Card>, or<ul>. Also check any component that wraps its children in<p>, since that wrapper may be the culprit. - Fix: Change the outer tag to a
<div>(or<span>for inline content), or change the inner block element to a<span>/<div>arrangement that's valid. Example:// Before <p><div>Hello</div></p> // After <div><div>Hello</div></div>
2. A <p> nested inside another <p> through a component boundary
This is the same error hidden behind components, often from a reusable Text or Description component that defaults to <p>.
- Check: In the browser, open DevTools, inspect the element the error points to, and walk up the parent chain. If you find a
<p>ancestor, trace which component renders it. - Fix: Make the wrapper polymorphic so callers can choose the tag, e.g.
<Text as="div">, or change the inner usage to .
Comments (0)