Nuxt•2y ago

Hydration Classname Mismatch Warnings

I keep getting Hydration Classname Mismatch Warnings and cannot get rid of them.

Basically, I am using

lazyssizes

lazyssizes

for lazyloading and the plugin will change the class

lazyload

lazyload

lazyloaded

lazyloaded

on the client once images are loaded. Now I keep getting these errors in my log and have no idea how I would get rid of them?
On pages with 20 images I get 20 error logs which is a bit frustrating. Does anyone have an idea how I can get rid of them / solve the issue?

An example

Hydration class mismatch on <img [...] />
- rendered on server: class="portrait fade lazyautosizes lazyloaded"
- expected on client: class="fade lazyload portrait"

Hydration class mismatch on <img [...] />
- rendered on server: class="portrait fade lazyautosizes lazyloaded"
- expected on client: class="fade lazyload portrait"

.fondazioneOP•2/27/24, 4:01 PM

hi @success131 and thanks for your answer. I do understand why these warnings show up, and yes, lazyload plugin changes the classnames because it is indicating that the image is loaded, I mean it makes sense that the classnames are different on the client in the end somehow.

I might have to change to a different lazyloader. It is just weird because these erros never showed up until recent updates

Cheaterman•2/27/24, 4:52 PM

Is there a rule against using AI to autogenerate responses like that?

Cheaterman•2/27/24, 4:53 PM

Because I feel like there should be!

..fondazione hi @success131 and thanks for your answer. I do understand why these warnings sh...

Cheaterman•2/27/24, 4:56 PM

If you make sure that the changes only happen eg onMounted() then you won't get warnings

.fondazioneOP•2/27/24, 7:03 PM

In my case I am using a file like this:

I've tried the nuxtApp hooks but somehow the plugin fires as soon as it is imported at the top. I did not find a way to have it fire only after mount

..fondazione In my case I am using a `/plugins/lazysizes.client.js` file like this: ``` impo...

Cheaterman•2/27/24, 7:04 PM

I see ; you might want to make that plugin client-only?

Cheaterman•2/27/24, 7:04 PM

You can use .server or .client suffix in the file name to load a plugin only on the server or client side.

.fondazioneOP•2/27/24, 7:04 PM

It is already client only as you can see. That is also why I did not understand why the hydration warnings are still showing up...

Cheaterman•2/27/24, 7:08 PM

Ah right, I hadn't noticed, my bad