Hydration error, how to fix it ? | Nuxt | Page 1

rancid veldt May 24, 2023, 1:46 AM

#

#

#

Hydration error, how to fix it ?

#

and what is causing this?

celest harbor May 24, 2023, 2:11 AM

#

you seem to have a hole bunch of hydration errors all over the place, not just in that file

#

probably unrelated but you want to use NuxtLink instead of router link in nuxt apps

rancid veldt May 24, 2023, 2:11 AM

#

Oh ok

#

I am converting my site from view 3 to nuxt 3

rancid veldt May 24, 2023, 2:14 AM

#

celest harbor you seem to have a hole bunch of hydration errors all over the place, not just i...

Yes whats cause this ?

celest harbor May 24, 2023, 2:14 AM

#

hard to tell without the full code

#

in general its caused by invalid html or a state mismatch between client and server

rancid veldt May 24, 2023, 2:15 AM

#

celest harbor May 24, 2023, 2:16 AM

#

if that's the question

rancid veldt May 24, 2023, 2:16 AM

#

My TheNavBar

#

most of the error come from here

celest harbor May 24, 2023, 2:17 AM

#

are you logged in on your local website?

rancid veldt May 24, 2023, 2:17 AM

#

yes

celest harbor May 24, 2023, 2:17 AM

#

try logging out and see if the issue goes away

rancid veldt May 24, 2023, 2:17 AM

#

#

#

https://dev.flavibot.xyz/

#

maybe it don't like the https lol

celest harbor May 24, 2023, 2:20 AM

#

I see you are using cloudflare as a proxy

rancid veldt May 24, 2023, 2:20 AM

#

yes

celest harbor May 24, 2023, 2:21 AM

#

https://nuxt.com/docs/getting-started/deployment#supported-hosting-providers

Nuxt

Deployment · Get Started with Nuxt

Deploy on a Node.js server, pre-render for static hosting and to serverless or edge environments.

rancid veldt May 24, 2023, 2:21 AM

#

bbut on the direct ip

celest harbor May 24, 2023, 2:21 AM

#

make sure you read through that checklist

rancid veldt May 24, 2023, 2:21 AM

#

i don't have the erros

celest harbor May 24, 2023, 2:21 AM

#

then it's probably that checklist

#

my guess would be on auto minify

rancid veldt May 24, 2023, 2:25 AM

#

but i don't use cloudflare worker

#

it's just proxied to my server

celest harbor May 24, 2023, 2:25 AM

#

yes

#

see my screenshot

#

it specifcally covers the cf cdn proxy and which settings to avoid

rancid veldt May 24, 2023, 2:25 AM

#

oh i miss read

#

It fixed the issue

#

thanku !

celest harbor May 24, 2023, 2:35 AM

#

Nice!

#

Youre welcome😊

rancid veldt May 24, 2023, 2:51 AM

#

:)

rancid veldt May 24, 2023, 4:59 AM

#

#

ah

rancid veldt May 26, 2023, 1:16 PM

#

Hello @celest harbor ?

celest harbor May 26, 2023, 1:18 PM

#

?

rancid veldt May 26, 2023, 1:18 PM

#

rancid veldt

for this

#

#

it come from this code

#

wtf

celest harbor May 26, 2023, 1:21 PM

#

https://stackblitz.com/github/nuxt/starter/tree/v3/?file=README.md

#

try creating a repro here

rancid veldt May 26, 2023, 1:28 PM

#

#

On my side, I don't have the error

celest harbor May 26, 2023, 1:28 PM

#

U can't access localstorage on server side

rancid veldt May 26, 2023, 1:29 PM

#

But it works on my side

#

but not on this editor

celest harbor May 26, 2023, 1:30 PM

#

I doubt that

#

The environment is the same

rancid veldt May 26, 2023, 1:31 PM

#

https://dev.flavibot.xyz/

celest harbor May 26, 2023, 1:31 PM

#

So you likely have a difference somewhere else

rancid veldt May 26, 2023, 1:31 PM

#

#

I copied and pasted my DropDown file

#

It's weird

#

On my app.vue i have this

celest harbor May 26, 2023, 1:38 PM

#

idk

#Hydration error, how to fix it ?