What to do with "document", "window" vars when SSR is enabled?

[romsar]

So, now, after SSR configured and enabled, I must avoid all client stuff like window, document variables?
For example, in Laravel Jetstream with Inertia by default we have Modal.vue that contain this code:

document.body.style.overflow = 'hidden'

Because server does know document variable it will throw error: "ReferenceError: document is not defined".
That should I do in that situation to avoid this exception? Check if document is not undefined or that?

[ajnsn]

Hey @RomanSarvarov

yep, at least Inertia itself is doing it for the window this way.

[ajnsn]

It looks like the Laravel guys do not have any intention to support SSR at this time.

What I was trying to say is that in the end this has nothing to do with Inertia. You would run into this even when running SSR without Intertia. It's just Vue and SSR and yes, it could also be your bundler.

[ObjectAssign]

Hey @RomanSarvarov

yep, at least Inertia itself is doing it for the window this way.

Hey that link Is now broken, how did they solve this? also it looks like they are supporting it now from the link you submitted "any intention to support SSR at this time" ? :)

[ajnsn]

inertia/packages/core/src/router.ts

Line 35 in 79eb916

const isServer = typeof window === 'undefined'

const isServer = typeof window === 'undefined'

if (! isServer) {
  // do something
}

[ObjectAssign]

inertia/packages/core/src/router.ts

Line 35 in 79eb916

const isServer = typeof window === 'undefined'

const isServer = typeof window === 'undefined'

if (! isServer) {
  // do something
}

I see, what is possible when a package uses the window object?

I use highcharts-vue which is a package from highcharts, its a bit outdated and needs options API instead of composition API..

It uses the window object, and when I try to run the inertia:start-ssr command it fails at: node_modules/highcharts-vue/dist/highcharts-vue.min.js

I have tried wrapping everything I can with that logic + using defineAsyncComponent to make it work, but it continues to fail

[reinink]

I see, what is possible when a package uses the window object?

In these situations you're kind of out of luck from an SSR perspective. Most modern higher quality packages include SSR support, as SSR is very common these days with frameworks like Nuxt and Next.js.

If you really want to use the package I'd recommend conditionally loading it only on the client. You can do this with a package like vue-client-only.