[nuxt] document is not defined

[segato]

Reproduction

Repo: https://github.com/ArthurSegato/portfolio-frontend
Node v20.5.0
PNPM 8.7.4
Nuxt 3.7.2
Nitro 2.6.3
Unlazy 0.10.1

Describe the bug

I have a dynamic project page on my frontend that is accessible via the index page, the project page consumes images from my backend (served statically) and project data (consumed via a REST request), when accessing the project page via the home page, no error occurs, but when refreshing the page the following error appears

500
document is not defined
at Module.lazyLoad (/C:/Users/segato/Documents/Github/portfolio-frontend/node_modules/.pnpm/@unlazy+core@0.10.1/node_modules/@unlazy/core/dist/index.mjs:14:23)
at setup (C:\Users\segato\Documents\Github\portfolio-frontend\pages\projects\[id].js:19:27)
at _sfc_main.setup (C:\Users\segato\Documents\Github\portfolio-frontend\pages\projects\[id].js:248:23)
at callWithErrorHandling (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+runtime-core@3.3.4\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:156:18)
at setupStatefulComponent (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+runtime-core@3.3.4\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7190:25)
at setupComponent (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+runtime-core@3.3.4\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7151:36)
at renderComponentVNode (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+server-renderer@3.3.4_vue@3.3.4\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:614:15)
at renderVNode (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+server-renderer@3.3.4_vue@3.3.4\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:743:14)
at renderComponentSubTree (C:\Users\segato\Documents\Github\portfolio-frontend\node_modules\.pnpm\@vue+server-renderer@3.3.4_vue@3.3.4\node_modules\@vue\server-renderer

Additional context

The error only appears when the 'lazyLoad()' function is added to the code

Logs

No response

[Johann Schopplich]

If you're using Nuxt, why not use the @unlazy/nuxt package directly? It is SSR-ready and provides an easy-to-use UnLazyImage component.

If you insist on using the native unlazy lazyLoad function, you have to wrap your call in a process.client if-statement.

[segato]

I see, I followed the documentation on the nuxt modules page, which appears to be out of date, thank you very much for your help!

[Johann Schopplich]

Oh, I see. The docs are up-to-date, but since unlazy is monorepo, the Nuxt modules page fetches only the top-level README.

Maybe there's a way to change that. Then you have a whole documentation to read! 😁