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"

Nuxt•2y ago•

12 replies

.fondazione

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

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"

Hydration Classname Mismatch Warnings

Similar Threads

Hydration Classname Mismatch Warnings

Similar Threads

Similar Threads

Similar Threads