Next.js Discord

Discord Forum

Unhandled Runtime Error

Answered
Belgian Hare posted this in #help-forum
Open in Discord
Belgian HareOP
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Expected server HTML to contain a matching <header> in <div>.


I have checked over the code and my header has a matching closing tag. I'm not sure what else I can do. I've tried to suppress it with suppressHydrationWarning however that doesn't seem to work.

My header header is attached
Answered by Arinji
basically the error is that there is some html you wrote which is served by the server and changed by the browser since something is invalid. To fix you ideally just go to chatgpt, and keep sending it all your components and ask if its valid html or not

or just go to the elements tab and match it with your code.
View full answer

8 Replies

Arinji
what is your code in
<CloseX />
<ArrowRight />
Arinji
basically the error is that there is some html you wrote which is served by the server and changed by the browser since something is invalid. To fix you ideally just go to chatgpt, and keep sending it all your components and ask if its valid html or not

or just go to the elements tab and match it with your code.
Answer
Arinji
@Belgian Hare
or you can just delete all of your elements, and add the one at a time till you see the error.
@Arinji what is your code in <CloseX /> <ArrowRight />
Belgian HareOP
const CloseX = () => (
  <svg id="closeX" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.85 11.85">
    <defs>
      <style>{`
        .css-x {
          fill: none;
          stroke: #0a0a0a;
          stroke-miterlimit: 10;
        }
      `}</style>
    </defs>
    <line className="css-x" x1="11.49" y1=".35" x2=".35" y2="11.49" />
    <line className="css-x" x1=".35" y1=".35" x2="11.49" y2="11.49" />
  </svg>
);
  
export default CloseX;


// components/ArrowRight.js
const ArrowRight = () => (
  <svg className="arrowRight" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.57 6.45">
    <defs>
      <style>{`
        .cls-1 {
          fill: none;
          stroke: #fff;
          stroke-miterlimit: 10;
          stroke-width: .75px;
        }
      `}</style>
    </defs>
    <line className="cls-1" x1="9.04" y1="3.23" y2="3.23" />
    <polyline className="cls-1" points="6.08 .27 9.04 3.23 6.08 6.19" />
  </svg>
);
  
export default ArrowRight;

Just svgs
Belgian HareOP
Yep. One of my components had improper nesting. Thanks!