Help Solving Hydration Error

Answered

shadow posted this in #help-forum

2024-05-30T16:24:54.164Z

hey devs i have a hydration error and the solution seems to be simple but i can't manage to solve it.

i have a toploader that changes its color based on the current theme (light, dark)

TopLoader.tsx

'use client'
import { useTheme } from 'next-themes'
import NextTopLoader from 'nextjs-toploader'
import React from 'react'

export default function TopLoader() {
    const { theme, resolvedTheme } = useTheme()

    const themeTopLoader = resolvedTheme === "light" ? "black" : "white";

    return (
        <div>
            <NextTopLoader 
                showSpinner={true} 
                color={themeTopLoader}
            />
        </div>
    )
}

and then im calling that component on the layout, but the color in the top loader is different in the server and the client

Error: Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

<TopLoader>
        <div>
          <NextTopLoader>
            <style>
             "#nprogress{pointer-events:none}#nprogress .bar{background:white;position:fixed;z-index:1600;top: 0;left:0;width:100%;height:3px}..."
             "#nprogress{pointer-events:none}#nprogress .bar{background:black;position:fixed;z-index:1600;top: 0;left:0;width:100%;height:3px}..."

what can i do solve this difference between the client and server?

and its funny that the hydration error only trigger when im in light mode and the top loader gets triggered when changing pages

Answered by Arinji

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr

View full answer

45 Replies

American Crow

2024-05-30T16:36:13.033Z

Show <NextTopLoader> code

shadowOP

2024-05-30T16:37:00.145Z

its a library
https://www.npmjs.com/package/nextjs-toploader

American Crow

2024-05-30T16:38:42.921Z

Oh shit and it does not expose something like className or styles at least i can't see it scrolling through.
My plan was to use dark: for the conditional styling that solved a similar issue i had once. But i think you cant control it that way

@American Crow Oh shit and it does not expose something like className or styles at least i can't see it scrolling through. My plan was to use `dark:` for the conditional styling that solved a similar issue i had once. But i think you cant control it that way

shadowOP

2024-05-30T16:40:23.353Z

yea it doesnt expose className, i mean it works but the hydration error appear

shadowOP

2024-05-30T16:40:57.368Z

what u mean by that? on themetoploader variable?

they have this but i dont think that could work
template: to include custom HTML attributes for the TopLoader.

American Crow

2024-05-30T16:43:09.022Z

In a project with next-theme and tailwind i had a similar issue.
this resulted in a hydration Error
const themeTopLoader = resolvedTheme === "light" ? "black" : "white";
but this worked for me:

<Mycomponent className="dark:text-white text-black" />

So i chose the 2nd way in my case

@American Crow In a project with next-theme and tailwind i had a similar issue. this resulted in a hydration Error `const themeTopLoader = resolvedTheme === "light" ? "black" : "white";` but this worked for me: tsx <Mycomponent className="dark:text-white text-black" /> So i chose the 2nd way in my case

shadowOP

2024-05-30T16:45:09.445Z

something like that?

'use client'
import { useTheme } from 'next-themes'
import NextTopLoader from 'nextjs-toploader'
import React from 'react'

export default function TopLoader({ className }: { className?: string }) {
    const { theme, resolvedTheme } = useTheme()

    const themeTopLoader = resolvedTheme === "light" ? "black" : "white";

    return (
        <div className={className}>
            <NextTopLoader 
                showSpinner={true} 
                color={themeTopLoader}
            />
        </div>
    )
}

and maybe remove the color variable in the component

i think

American Crow

2024-05-30T16:46:06.784Z

if the NextTopLoader inherits it maybe

i dont know how it works internally since its 3rd party

Arinji

2024-05-30T16:48:53.667Z

@shadow can you try one thing, import it without ssr

one sec imma send docs for that

@American Crow if the NextTopLoader inherits it maybe

shadowOP

2024-05-30T16:49:16.002Z

NextTopLoader doesnt inherits the classes, it just uses the default one

Arinji

2024-05-30T16:49:26.453Z

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr

Answer

Arinji

2024-05-30T16:49:38.856Z

import your loader component inside your layout, with that

American Crow

2024-05-30T16:50:55.319Z

I mean you could do what @Arinji said but before that i'd simply suppressHydrationWarning since there is not really a reason to load on on client only

@Arinji import your loader component inside your layout, with that

shadowOP

2024-05-30T16:52:07.553Z

it worked

@American Crow I mean you could do what <@890486507872342027> said but before that i'd simply `suppressHydrationWarning` since there is not really a reason to load on on client only

shadowOP

2024-05-30T16:52:22.542Z

i already have that

@shadow it worked

Arinji

2024-05-30T16:53:55.697Z

nice to know, can you do another thing for me?

@Arinji nice to know, can you do another thing for me?

shadowOP

2024-05-30T16:54:18.671Z

yea sure

Arinji

2024-05-30T16:54:28.719Z

make a useEffect, and listen for resolvedTheme, and do your check in there, and instead of assigning a variable, assign it to a state

makes sense?

also remove the no ssr thing

American Crow

2024-05-30T16:55:01.780Z

can you try loading the whole component conditionally?

'use client'
import { useTheme } from 'next-themes'
import NextTopLoader from 'nextjs-toploader'
import React from 'react'

export default function TopLoader() {
    const { theme, resolvedTheme } = useTheme()

    //const themeTopLoader = resolvedTheme === "light" ? "black" : "white";

    if (resolvedTheme === "light) {
      return (
         <div>
            <NextTopLoader 
                showSpinner={true} 
                color="black"
            />
        </div>
      )
    }

    return (
        <div>
            <NextTopLoader 
                showSpinner={true} 
                color="white"
            />
        </div>
    )
}

@Arinji makes sense?

shadowOP

2024-05-30T16:58:50.488Z

if this is the right implementation, the error is appering:

'use client'
import { useTheme } from 'next-themes'
import NextTopLoader from 'nextjs-toploader'
import React, { useEffect, useState } from 'react'


export default function TopLoader() {
    const { resolvedTheme } = useTheme()
    const [theme, setTheme] = useState(resolvedTheme)

    useEffect(() => {
        const themeTopLoader = resolvedTheme === "light" ? "black" : "white";
        setTheme(themeTopLoader)
    } , [resolvedTheme])

    return (
        <div>
            <NextTopLoader 
                showSpinner={true} 
                color={theme}
            />
        </div>
    )
}

@American Crow can you try loading the whole component conditionally? tsx 'use client' import { useTheme } from 'next-themes' import NextTopLoader from 'nextjs-toploader' import React from 'react' export default function TopLoader() { const { theme, resolvedTheme } = useTheme() //const themeTopLoader = resolvedTheme === "light" ? "black" : "white"; if (resolvedTheme === "light) { return ( <div> <NextTopLoader showSpinner={true} color="black" /> </div> ) } return ( <div> <NextTopLoader showSpinner={true} color="white" /> </div> ) }

shadowOP

2024-05-30T17:00:06.325Z

and this is giving the error too

Arinji

2024-05-30T17:00:14.819Z

hmm, this feels like a next-themes issue in that case, can you try and remove the useTheme component?

i just want to see whats causing the issue

@Arinji hmm, this feels like a next-themes issue in that case, can you try and remove the useTheme component?

shadowOP

2024-05-30T17:03:53.189Z

i used this approuch to test that:

'use client'
import { useTheme } from 'next-themes'
import NextTopLoader from 'nextjs-toploader'
import React, { useEffect, useState } from 'react'


export default function TopLoader() {
    // const { resolvedTheme } = useTheme()
    const resolvedTheme = "dark" 
    const [theme, setTheme] = useState(resolvedTheme)

    useEffect(() => {
        const themeTopLoader = resolvedTheme === "light" ? "black" : "white";
        setTheme(themeTopLoader)
    } , [resolvedTheme])

    return (
        <div>
            <NextTopLoader 
                showSpinner={true} 
                color={theme}
            />
        </div>
    )
}