How To Deal With “Window Is Not Defined” In SvelteKit

<lite-youtube videoid=“l1AB5f0Xyd4” playlabel=“How To Solve “Window Is Not Defined” In SvelteKit”>

Table of Contents

• The Problem
• Using The Browser Import
• Using Dynamic Imports

The Problem

SvelteKit pages are components that run on the server and client which causes problems if a package you’re using tries to invoke a method on the window object or self that doesn’t exist on the server.

Using The Browser Import

Let’s say for example this is some library code.

export function greet() {
  window.alert('Hello')
}

If you import it everything works fine until you try to invoke the function. Refreshing the page causes an error because it tries to run the code on the server.

<script lang="ts">
  import { greet } from 'greet'

  greet() // 💩
</script>

You can use the onMount lifecycle function or the browser module from SvelteKit to make sure the code runs in the browser and only then run it.

<script lang="ts">
  import { browser } from '$app/environment'
  import { greet } from 'greet'

  if (browser) {
    greet() // 👍️
  }
</script>

You could also use Svelte actions since they’re element-level lifecycle functions.

<script>
  import { greet } from 'greet'
</script>  

<div use:greet />

Using Dynamic Imports

What do you do when the import already runs some code that causes trouble?

export function greet() {
  window.alert('Hello')
}  

window.alert('💩')

This is the issue I ran into and the answer is dynamic imports.

Dynamic imports let you load a module asynchronously using the import keyword and it returns a promise which fulfills to an object containing all the exports from the module.

<script lang="ts">
  import { onMount } from 'svelte'

  onMount(async () => {
    const Greet = await import('greet')
    Greet.greet()
  })
</script>

That’s it! 😄