How To Deal With "Window Is Not Defined" In SvelteKit

[@GrizhlieCodes]

Well darn, I did not know about the (browser) bit. That makes my life simpler, cheers.

[@JoyofCodeDev]

You're welcome! 💪

[@tithos]

Same here. I have seen it, but it never "clicked"

[@pm1234]

Is it a PNG mask in OBS Studio you use or something else?

[@JoyofCodeDev]

Yeah! 😄

[@carlos-hernandez.]

Excelent!

[@senseicodes]

Hey what about a UI library that uses the window object and you have to import its js file like so; (import 'uikit') or import 'uikit.min.js'

[@JoyofCodeDev]

You can use a dynamic import or disable SSR for the page: kit.svelte.dev/docs/page-options#ssr.

[@senseicodes]

Thank you

[@tithos]

This inspired me to fix a bug I have on my tic-tac-toe app I made with sveltekit. I had scooping issues trying to use onMount. I this browser with help. 🤞🏼

[@leelonghui]

When to use onMount and browser?

[@JoyofCodeDev]

Most of the time you're going to use `onMount` to run some logic and `browser` inside a variable or conditional block.

[@qwikdeveloper1776]

Have you ever been able to make libraries like Lokomotiv or Lenis work with Svelte?

[@JoyofCodeDev]

Is this particular to those libraries or would a video on how to use third party libraries with Svelte help?

[@qwikdeveloper1776]

@@JoyofCodeDev so first of all thanks so much for replying, you're really doing gods work with your videos. For me svelte is close to the perfect framework except for the lack of a good smooth scrolling library. If you see those fancy award winning websites they almost all have scrolling effects. And the scrollY trick doesn't work properly on some browsers due to performance issues. I don't know what you would suggest. I personally haven't been able to integrate libraries like Lokomotiv or lenis. Thanks for your feedback

[@JoyofCodeDev]

@@qwikdeveloper1776 I would use GSAP: greensock.com/scrollsmoother/.

[@qwikdeveloper1776]

@@JoyofCodeDev The problem with GSAP is that it's not opensource and requires a license. Scrollsmoother alone costs at least $150+ per year.

[@hoyakim4280]

I've resolved this problem by adding "export const ssr = false;" in +layout.js because my application completely separated client and server projects.

[@JoyofCodeDev]

That also works! 😄

[@shiytp]

if (typeof window !== 'undefined') { return `😏` }

[@JoyofCodeDev]

Your code could run in an environment where `window` exists like Deno, so you have to use `self`.