Next.js Discord

Discord Forum

NextJS hydration error

Answered
Baha posted this in #help-forum
Open in Discord
BahaOP
How do i fix this 😭

I understand the error, but its inside the node_modules folder for a slate-react package...? How do i hide the error without the entire root turning to client 
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <p>.

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

Component Stack
div
RestoreDOM
./node_modules/slate-react/dist/index.es.js (2882:11)
Editable
./node_modules/slate-react/dist/index.es.js (2936:86)
Slate
./node_modules/slate-react/dist/index.es.js (4379:11)
p
SlateBody
./app/components/cards/SlateBody.jsx (15:11)
a

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Thanks!
Answered by joulev
node_modules and .next shouldn't be relevant here. from the stack trace i know that there is at least a <p> in a file that imports SlateBody.jsx
View full answer

24 Replies

BahaOP
[DOESNT WORK - NOTHING IS BEING RETURNED]
I put the component in a useEffect(), hope this helps!

Heres my old code: 
return (
  <p> 
    <Slate suppressHydrationWarning={true} ... >
      <Editable 
          ...
      />
    </Slate>
  </p> 
)


Heres my new code:
useEffect(()=>{
  return (
    <p> 
      <Slate suppressHydrationWarning={true} ... >
        <Editable 
            ...
        />
      </Slate>
    </p> 
  )
},[])

Hope this helps!
BahaOP
Doesnt work
<Milind ツ />
Try clearing your next_modules, delete lock file, delete .next folder, do npm install and npm run dev
Slate renders <div> elements and <div> must not be nested inside <p>
And you don’t need suppressHydrationWarning here so remove it
BahaOP
Hmm still the same error:
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <p>.

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

Component Stack
div
SlateBody
./app/components/cards/SlateBody.jsx (15:11)
p
a


But I cant seem to find the p tag?

Heres my parent code: 
<article className="...">
  <div>
    <div className="content main">
      ...
      <SlateBody data={data} trimEnd={300}/>
    </div>
  </div>
</article>

And heres SlateBody
  try {
    const slateData = JSON.parse(data.body);

    return (
      <div className="my-1 body text-ellipsis overflow-hidden" style={{maxHeight:trimEnd}}>
      
      <Slate editor={editor} initialValue={...}>
        <Editable 
          readOnly
          renderElement={renderElement}
          renderLeaf={renderLeaf}
        />
      </Slate>
      
      </div>
    )

  } catch (error) {
    console.log("Error Fetching Data's Body:", error);
    return <div className="my-1 body text-ellipsis overflow-hidden" style={{maxHeight:trimEnd}}> <i>Error Fetching {"Data's"} Body.</i>; </div>
  }

ill try deleting node_modules, lock and .next folder
Answer
joulev
ensure that from the <Slate> component upwards in the html tree until the root <html> element, there are no <p> (or <a>)
BahaOP
Alr
Hmm
This is odd
In the error message, it shows this is where the error is, ./app/components/cards/SlateBody.jsx (15:11)
But line 15 is this:
  let bodyContent = <i> Loading </i>;
  // trying to troublshoot, no value to the work
  const [isClient, setIsClient] = useState(false)
 
  useEffect(() => {
    setIsClient(true)
  }, [])
It keeps saying that location even when I move stuff, imma try deleting .next, node_modules and lock, theres no harm in doing so
BahaOP
Alright gimme a sec
BahaOP
Huh, the error is gone now? Ill check all my components and see, maybe its a different component? But if so why was it showing that url?
Ill slowly add more and more components untill i see the error?
OK, so i pasted in my entire /page.jsx rather than just using a simple part, the error is back. I dont think the error has anything to do with SlateBody.jsx, because it was present with the simple part, but now im guessing im calling it wrong in the /page.jsx
omg im an idiot
It was fixed, the error was in another type of card i hadnt checked it -_-
Sorry about all that, thanks a ton for your direction ❤️