Nuxt•10mo ago

Hydration Classname Mismatch Warnings

I keep getting Hydration Classname Mismatch Warnings and cannot get rid of them. Basically, I am using lazyssizes for lazyloading and the plugin will change the class lazyload to 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"

8 Replies

Unknown User•10mo ago

Message Not Public

tierraOP•10mo ago

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

Unknown User•10mo ago

Message Not Public

Cheaterman•10mo ago

Is there a rule against using AI to autogenerate responses like that? Because I feel like there should be! If you make sure that the changes only happen eg onMounted() then you won't get warnings

tierraOP•10mo ago

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

import lazySizes from "lazysizes"
import "lazysizes/plugins/parent-fit/ls.parent-fit"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(() => lazySizes)
})

import lazySizes from "lazysizes"
import "lazysizes/plugins/parent-fit/ls.parent-fit"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(() => lazySizes)
})

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

Cheaterman•10mo ago

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

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

tierraOP•10mo ago

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•10mo ago

Ah right, I hadn't noticed, my bad

Gaming

Programming

Hydration Classname Mismatch Warnings