Enabling SSR breaks my website | Nuxt | Page 1

noble chasm Jan 24, 2023, 5:40 PM

#

Heyo, I found out I've been developing with ssr: false the whole time, and I wanted to deploy my website completely statically. Turning SSR on breaks my website and I don't know where to start fixing it.

at <App>
[nitro] [dev] [unhandledRejection] ReferenceError: window is not defined

Using RC-13 nuxt, pinia, all data is gathered through graphql.

Also, how will nuxt know to also statically grab things that only get called for once user clicks a button? (For example music file when user clicks play).

#

dull gorge Jan 24, 2023, 5:42 PM

#

noble chasm

you should perform any stuff related to DOM inside the onMounted hook, which is called when the page is rendered on the user's browser, so the window would actually exist

noble chasm Jan 24, 2023, 5:43 PM

#

I am using on mounted

fallow vessel Jan 24, 2023, 5:43 PM

#

You have some of plugins/code that uses window. which is not available on server

#

You have to wrap that code in

if(!import.meta.env.SSR){window...}

#

if it is plugin u have to name plugin as nameofplugin.client.ts if it is template then u have to wrap code in <client-only></client-only> and third thing if it is a whole component u can name ur component as componentName.client.vue
Hope it helps

noble chasm Jan 24, 2023, 5:45 PM

#

uuf

#

AHA! I was getting

if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
    musicLibrary.is_darkmode = true
}

in app.vue

#

Where should I move this part of the code then?

dull gorge Jan 24, 2023, 5:48 PM

#

inside onMounted 🙂

noble chasm Jan 24, 2023, 5:48 PM

#

Ah perfect

#

One more thing, know what this could be?

dull gorge Jan 24, 2023, 5:50 PM

#

not sure about that, can you try restarting your dev server?

#

actually, your musicLibrary composable, it is possible you are trying to access something outside the lifecycle

noble chasm Jan 24, 2023, 5:51 PM

#

it still appears after reset

#

Yeah, I query graphql stuff in there, but don't know what that error exactly means

dull gorge Jan 24, 2023, 5:52 PM

#

maybe this might help, https://github.com/nuxt/nuxt/issues/13739#issuecomment-1397313227

noble chasm Jan 24, 2023, 5:54 PM

#

Mine is inside an async function already, and honestly I don't see exactly what breaks as everything works as it should ^^'

#Enabling SSR breaks my website