NuxtN
Nuxt•14mo ago
Samuelreichoer

Lazysizes hydration missmatch

Hi, I'm trying to implement lazysizes in nuxt (because of the automatic size detection I know loading lazy has great browser support) but I get hydration errors.
I tried to import the lazysizes library with a plugin named '/plugins/lazysizes.client.ts' but I still get theses errors. Can someone explain me why this happens and show me how to do it right :D?

This is what i tried: 

// init on server
import lazySizes from 'lazysizes';

// this does run
console.log('running WRONGLY on server');


I already found that issue https://github.com/nuxt/nuxt/issues/29056 and tried it with that code https://stackblitz.com/edit/github-xdvnbl?file=plugins%2Flazysizes.client.js,pages%2Fabout.vue,pages%2Findex.vue but that does not help.

I use these versions: 

    "lazysizes": "^5.3.2",
    "nuxt": "3.14.159",
image.png
GitHub
lazysizes.client.js running on server · Issue #29056 · nuxt/nuxt
Environment ------------------------------ - Operating System: Darwin - Node Version: v18.18.2 - Nuxt Version: 3.13.0 - CLI Version: 3.13.1 - Nitro Version: 2.9.7 - Package Manager: unknown - Build...
StackBlitz
Simonhrogers - Transition No Worky - StackBlitz
Run Transition No Worky created by Simonhrogers on StackBlitz
Was this page helpful?