HYDRATION FILED

Unanswered

Challangerson posted this in #help-forum

2024-01-25T15:07:08.000Z

  return (
    <>
      <div className='header'>
        <div className={`${Navbar ? "act" : ""}`}>
          <div className="logo">Salk<span className="white">Mc</span></div>
          <p className="scroll"> </p>
          <nav className={`nav ${Navbar ? "active" : ""}`}>
            <ul className='ul'>
              <li className='li'><Link href={"/"} className="menu active">MENU GÅÃ“WNE</Link></li>
              <li className='li'><Link href={"/shop"}>SKLEP</Link></li>
              <li className='li'><Link href={"/rules"}>REGULAMIN</Link></li>
              <li className="li"><Link href={"/gameinfo"}>ROZGRYWKA</Link></li>
            </ul>
          </nav>
          <div className={`menu-toggle ${Navbar ? "active" : ""}`} > <FaAlignRight onClick={() => {toggleNavbar(!Navbar)}}/> </div>
        </div>
      </div>
    </>
  )

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 <div>.

227 Replies

ChallangersonOP

2024-01-25T15:16:43.000Z

ChallangersonOP

2024-01-25T19:53:39.000Z

Btw fixed this code isn't a problem

Next dont like function without name like empty fc so i used arrowed function

ReverseGem7

2024-01-25T20:17:39.000Z

https://nextjs.org/docs/messages/react-hydration-error

u can add to the html on layout suppressHydrationWarning

<html lang="en" suppressHydrationWarning>

Northeast Congo Lion

2024-01-25T23:34:02.000Z

I would advise fixing the issue.

Usually this happens because you use illegal html

so a block element inside an inline element div inside p for example

@Northeast Congo Lion I would advise fixing the issue.

ChallangersonOP

2024-01-26T13:42:16.000Z

the problem is

  useEffect(() => {
    window.addEventListener('scroll', () => {
      const header = document.querySelector('.header');

          if(header == null) {
            console.log('error with header');
            return;
          }
      
          header.classList.toggle("sticky", window.scrollY > 250);
    })
  });

this returs me that error

Northeast Congo Lion

2024-01-26T13:46:20.000Z

i would use refs

for this

instead of just using document.querySelector

return; no need.

just simple if header != null, then run the toggle logic

@Challangerson jsx useEffect(() => { window.addEventListener('scroll', () => { const header = document.querySelector('.header'); if(header == null) { console.log('error with header'); return; } header.classList.toggle("sticky", window.scrollY > 250); }) });

Northeast Congo Lion

2024-01-26T13:47:27.000Z

so if u remove this, no hydration error?

@Northeast Congo Lion so if u remove this, no hydration error?

ChallangersonOP

2024-01-26T13:47:53.000Z

sorry my bad

its not

Northeast Congo Lion

2024-01-26T13:48:26.000Z

hydration error is usually illegal html.

please show full html where component is causing issue.

ChallangersonOP

2024-01-26T13:48:49.000Z

  return (
    <>
      <div className="header">
        <div className={`${Navbar ? "act" : ""}`}>
          <p className="logo">Salk<span className="white">Mc</span></p>
          <p className="scroll"> </p>
          <nav className={`nav ${Navbar ? "active" : ""}`}>
            <ul className='ul'>
              <li className='li'><Link href={"/"} className="menu active">MENU GÅÃ“WNE</Link></li>
              <li className='li'><Link href={"/shop"}>SKLEP</Link></li>
              <li className='li'><Link href={"/rules"}>REGULAMIN</Link></li>
              <li className="li"><Link href={"/gameinfo"}>ROZGRYWKA</Link></li>
            </ul>
          </nav>
          <div className={`menu-toggle ${Navbar ? "active" : ""}`} > 
            <FaAlignRight onClick={() => {toggleNavbar(!Navbar)}}/> </div>
        </div>
      </div>
    </>
  )
}

Northeast Congo Lion

2024-01-26T13:48:53.000Z

I usually like to work back with hydration error.

E.g remove components till the error is gone, then you know where the issue lies

ChallangersonOP

2024-01-26T13:49:22.000Z

export default function RootLayout({ children }) {



  return (
    <html lang="en" suppressHydrationWarning>
      <Head />
      <body className={inter.className}>
        <ShowHeader />
            {children}
        <Footer/>
      </body>
    </html>
  )
}

Northeast Congo Lion

2024-01-26T13:50:09.000Z

hmm i dont know if <Head /> is valid anymore in next 14

I would first remove that.

also remove suppressHydrationWarning from body.

try and find the actual error instead of ignoring it

ChallangersonOP

2024-01-26T13:50:42.000Z

function Head() {
  return (
    <>
      <title>xxx</title>
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <link rel="icon" href="/favicon.ico" type="image/gif" />
    </>
  )
}

export default Head

this is my head

Northeast Congo Lion

2024-01-26T13:50:50.000Z

yeah u dont do this in next14

ChallangersonOP

2024-01-26T13:51:00.000Z

so how can i do it

Northeast Congo Lion

2024-01-26T13:51:01.000Z

you have to use metadata

to set title, desc, etc

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

per page basis.

ChallangersonOP

2024-01-26T13:51:41.000Z

still that same errro

Northeast Congo Lion

2024-01-26T13:51:42.000Z

you can also set it on layout.js

export const metadata = {
  title: 'Site Title'
};

yeah it may not be the error, but it is the proper way

ChallangersonOP

2024-01-26T13:51:59.000Z

disabled it

and still that same

@Challangerson jsx return ( <> <div className="header"> <div className={`${Navbar ? "act" : ""}`}> <p className="logo">Salk<span className="white">Mc</span></p> <p className="scroll"> </p> <nav className={`nav ${Navbar ? "active" : ""}`}> <ul className='ul'> <li className='li'><Link href={"/"} className="menu active">MENU GÅÃ“WNE</Link></li> <li className='li'><Link href={"/shop"}>SKLEP</Link></li> <li className='li'><Link href={"/rules"}>REGULAMIN</Link></li> <li className="li"><Link href={"/gameinfo"}>ROZGRYWKA</Link></li> </ul> </nav> <div className={`menu-toggle ${Navbar ? "active" : ""}`} > <FaAlignRight onClick={() => {toggleNavbar(!Navbar)}}/> </div> </div> </div> </> ) }

Northeast Congo Lion

2024-01-26T13:52:06.000Z

pls remove everyhting inside className=header

need to identify which element is causing the issue.

ChallangersonOP

2024-01-26T13:52:57.000Z

yea

its something in header

Northeast Congo Lion

2024-01-26T14:03:44.000Z

okay

@Challangerson yea

Northeast Congo Lion

2024-01-26T14:03:50.000Z

so remove the header code

bit by bit

@Northeast Congo Lion so remove the header code

ChallangersonOP

2024-01-26T14:04:03.000Z

found it but dont know why

Northeast Congo Lion

2024-01-26T14:04:07.000Z

show me issue

ChallangersonOP

2024-01-26T14:04:16.000Z

"use client";

import React from 'react'
import { useState, useEffect } from 'react'
import { FaAlignRight } from 'react-icons/fa';
import Link from 'next/link'
function ShowHeader() {

  const [navbar, toggleNavbar] = useState(false);


  useEffect(() => {
    window.addEventListener('scroll', () => {
      const header = document.getElementsByClassName('header')[0];

      if(header == null) {
        console.log('error with header');
        return;
      }
  
      header.classList.toggle("sticky", window.scrollY > 250);
    })
  });

  return (
    <>
      <div className="header">
        <div className={`${navbar ? "act" : ""}`}>
          {/* <p className="logo">Salk<span className="white">Mc</span></p>
          <p className="scroll"> </p>
          <nav className={`nav ${Navbar ? "active" : ""}`}>
            <ul className='ul'>
              <li className='li'><Link href={"/"} className="menu active">MENU GÅÃ“WNE</Link></li>
              <li className='li'><Link href={"/shop"}>SKLEP</Link></li>
              <li className='li'><Link href={"/rules"}>REGULAMIN</Link></li>
              <li className="li"><Link href={"/gameinfo"}>ROZGRYWKA</Link></li>
            </ul>
          </nav>
          <div className={`menu-toggle ${Navbar ? "active" : ""}`} > 
            <FaAlignRight onClick={() => {toggleNavbar(!Navbar)}}/>
          </div> */}
        </div>
      </div>
    </>
  )
}

export default ShowHeader

<div className={`${navbar ? "act" : ""}`}>

this cline returns it

but dont know why

Northeast Congo Lion

2024-01-26T14:05:15.000Z

toggleNavbar(!navbar)

case sensistive.

ChallangersonOP

2024-01-26T14:05:24.000Z

know it

Northeast Congo Lion

2024-01-26T14:05:27.000Z

ur state uses navbar but ur using Navbar

ChallangersonOP

2024-01-26T14:05:30.000Z

just changed it 10 sec ago

its doesnt matter

Northeast Congo Lion

2024-01-26T14:05:44.000Z

also u can remove

ChallangersonOP

2024-01-26T14:05:52.000Z

as u can see that code is commented

Northeast Congo Lion

2024-01-26T14:05:53.000Z

onClick={() => toggleNavbar(!navbar)}

the extra {}

@Challangerson as u can see that code is commented

ChallangersonOP

2024-01-26T14:06:12.000Z

Northeast Congo Lion

2024-01-26T14:06:18.000Z

<FaAlignRight what is this component

ChallangersonOP

2024-01-26T14:06:28.000Z

icons from FA

  return (
    <>
      <div className="header">
        <div className={`${navbar ? "act" : ""}`}>
        </div>
      </div>
    </>
  )

this code returns me that error

BUT why?

Northeast Congo Lion

2024-01-26T14:07:11.000Z

can u remove the Fragment?

<></>

wrapper

ChallangersonOP

2024-01-26T14:07:30.000Z

still that same error

Northeast Congo Lion

2024-01-26T14:07:35.000Z

what next version u using

ChallangersonOP

2024-01-26T14:07:48.000Z

14.1

Northeast Congo Lion

2024-01-26T14:07:55.000Z

hmm

and if u do this:

return (
    <>
      1
    </>

still same error?

if so, the issue doesn't exist in the header.

ChallangersonOP

2024-01-26T14:08:58.000Z

not error

this code

<div className="header">
        <div className={`${navbar ? "act" : ""}`}>
        </div>
      </div>

returns error

this code

<div className="header">
      </div>

didnt

cant be div in div

or what

Northeast Congo Lion

2024-01-26T14:09:58.000Z

okay

<div className={navbar && "act"}>
</div>

what about this?

are u able to put this repo onto git so I can clone it myself?

ChallangersonOP

2024-01-26T14:11:46.000Z

still thta same error

@Northeast Congo Lion js <div className={navbar && "act"}> </div>

ChallangersonOP

2024-01-26T14:11:59.000Z

with thta code

Northeast Congo Lion

2024-01-26T14:12:06.000Z

wtf

ChallangersonOP

2024-01-26T14:12:27.000Z

for the first time vsc returns

error about ? and :

<div className={navbar ? "act" : ""}>

need to change for that

and that still dont work

Northeast Congo Lion

2024-01-26T14:12:56.000Z

if u do

navbar && act

that is if left hand side true, return right hand

ChallangersonOP

2024-01-26T14:13:10.000Z

If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead.

Northeast Congo Lion

2024-01-26T14:13:30.000Z

both work, but idk why the hydration issue flags that

i use both without issues

@Challangerson `If you used to conditionally omit it with className={condition && value}, pass className={condition ? value : undefined} instead.`

Northeast Congo Lion

2024-01-26T14:14:40.000Z

are u able to put project on public github?

ChallangersonOP

2024-01-26T14:15:12.000Z

trying to

my network is really slow

ChallangersonOP

2024-01-26T14:41:29.000Z

@Northeast Congo Lion

can u give me ur gh?

found it

added

https://github.com/DizzyMontage13/salkmc

Northeast Congo Lion

2024-01-26T14:49:17.000Z

Is it private?

ChallangersonOP

2024-01-26T14:50:05.000Z

yes

but added ur acc

https://github.com/DizzyMontage13/salkmc/invitations

ChallangersonOP

2024-01-26T15:06:57.000Z

@Northeast Congo Lion did u find something?

fixed if i changed div to section

but why

Northeast Congo Lion

2024-01-26T15:22:37.000Z

sorry i am eating lunch right now ðŸ™‚

iwill check soon

i would review this

@Challangerson i am not getting issue

ChallangersonOP

2024-01-26T15:26:40.000Z

refresh the page

Northeast Congo Lion

2024-01-26T15:26:53.000Z

i am

0 error

ChallangersonOP

2024-01-26T15:27:26.000Z

and scroll down

a little

the other question how can i set a favicon using metadata?

Northeast Congo Lion

2024-01-26T15:28:45.000Z

yes

u can

use icons

ChallangersonOP

2024-01-26T15:28:53.000Z

how can i https://cdn.discordapp.com/emojis/807693875283623946.webp?size=48&name=SmileDog&quality=lossless

Northeast Congo Lion

2024-01-26T15:29:54.000Z

1 sec

icons: {
  icon: path_to_favicon 
}

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons

ChallangersonOP

2024-01-26T15:33:34.000Z

  icons: {
    icon: '/favicon.ico',
    shortcut: ['/favicon.ico']
  }

still dont work

Northeast Congo Lion

2024-01-26T15:42:53.000Z

if inside public, try adding /public/favicon/ico

@Challangerson fixed if i changed div to section

Northeast Congo Lion

2024-01-26T15:43:16.000Z

if its a header element, instead of using section use header

@Northeast Congo Lion if inside public, try adding `/public/favicon/ico`

ChallangersonOP

2024-01-26T15:44:18.000Z

public have /public/favicon.ico, app folder have /favicon,ico

everywhere i can i put an favicon

and still

on head in website it didnt chnaged

Northeast Congo Lion

2024-01-26T15:45:32.000Z

is there a 404

try ctrl shift r

hard-refresh,

check console if any 404

did u read the docs i sent?

ChallangersonOP

2024-01-26T15:46:00.000Z

Northeast Congo Lion

2024-01-26T15:46:17.000Z

sorry

try

ChallangersonOP

2024-01-26T15:47:52.000Z

in proposition for link

its shows a icon

but not on the tab

Northeast Congo Lion

2024-01-26T15:48:08.000Z

clear ur cahce and check

ChallangersonOP

2024-01-26T15:48:39.000Z

still that same

Northeast Congo Lion

2024-01-26T15:48:46.000Z

show full code pls

ChallangersonOP

2024-01-26T15:48:58.000Z

import './globals.scss'
import { Inter } from 'next/font/google'
import Head from 'next/head';
import ShowHeader from '../../components/header'
import Footer from '../../components/footer'
import favicon from './favicon.ico';

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'x',
  description: 'xy',
  icons: {
    icon: './favicon.ico',
    shortcut: './favicon.ico'
  }
}

export default function RootLayout({ children }) {

  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ShowHeader />
            {children}
        <Footer/>
      </body>
    </html>
  )
}