"window is not defined" error (SvelteKit)

[tomgenoni]

Using the default example in the docs I'm getting:

500
window is not defined
ReferenceError: window is not defined
    at Dropzone.svelte:293:10
    at run (/Users/tom/Sites/slack-demo/node_modules/svelte/internal/index.js:22:12)
    at Array.forEach (<anonymous>)
    at run_all (/Users/tom/Sites/slack-demo/node_modules/svelte/internal/index.js:28:9)
    at Object.render (/Users/tom/Sites/slack-demo/node_modules/svelte/internal/index.js:1693:13)
    at render_response (file:///Users/tom/Sites/slack-demo/node_modules/@sveltejs/kit/dist/ssr.js:561:28)
    at async respond$1 (file:///Users/tom/Sites/slack-demo/node_modules/@sveltejs/kit/dist/ssr.js:1403:4)
    at async render_page (file:///Users/tom/Sites/slack-demo/node_modules/@sveltejs/kit/dist/ssr.js:1480:19)
    at async resolve (file:///Users/tom/Sites/slack-demo/node_modules/@sveltejs/kit/dist/ssr.js:1743:10)
    at async respond (file:///Users/tom/Sites/slack-demo/node_modules/@sveltejs/kit/dist/ssr.js:1722:10)

Here's my package.json

{
  "name": "demo",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@sveltejs/kit": "next",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^3.2.1",
    "prettier": "^2.4.1",
    "prettier-plugin-svelte": "^2.4.0",
    "svelte": "^3.42.6"
  },
  "type": "module",
  "dependencies": {
    "svelte-file-dropzone": "^0.0.15"
  }
}

Likely an issue with SvelteKit.

[thecodejack]

probably something changed with sveltekit. Any pointers to debug. Have very minimal time to fix issue for me.

[thecodejack]

Tried with sveltekit....didn't see any error. Added sveltekit example as well
https://github.com/thecodejack/svelte-file-dropzone/tree/master/examples/sveltekit-js

[thecodejack]

By any chance is your app using TS?

[skanel]

it is the same for my case.
I am using sveltkit too, but the problem raise only when we try to refresh the page.

[AbramovYuri]

window is not defined

ReferenceError: window is not defined
    at Dropzone.svelte:293:10
    at run (D:\Work\OpenServer\domains\proks-form-frontend\node_modules\svelte\internal\index.js:22:12)
    at Array.forEach (<anonymous>)
    at run_all (D:\Work\OpenServer\domains\proks-form-frontend\node_modules\svelte\internal\index.js:28:9)
    at Object.render (D:\Work\OpenServer\domains\proks-form-frontend\node_modules\svelte\internal\index.js:1711:13)
    at render_response (file:///D:/Work/OpenServer/domains/proks-form-frontend/node_modules/@sveltejs/kit/dist/ssr.js:561:28)
    at async respond$1 (file:///D:/Work/OpenServer/domains/proks-form-frontend/node_modules/@sveltejs/kit/dist/ssr.js:1377:4)
    at async render_page (file:///D:/Work/OpenServer/domains/proks-form-frontend/node_modules/@sveltejs/kit/dist/ssr.js:1454:19)
    at async resolve (file:///D:/Work/OpenServer/domains/proks-form-frontend/node_modules/@sveltejs/kit/dist/ssr.js:1717:10)
    at async respond (file:///D:/Work/OpenServer/domains/proks-form-frontend/node_modules/@sveltejs/kit/dist/ssr.js:1696:10)

I also have such an error, adapter static is connected in svelte-kit and ssr is enabled.
If you turn off ssr on the page, the error disappears.

<script context="module">
	export const ssr = false;
</script>

[thecodejack]

ok let me add a condition to avoid same.

[thecodejack]

please check with [email protected] and let me know if that fixes the issue

[AbramovYuri]

window is not defined

ReferenceError: window is not defined
    at Dropzone.svelte:293:10
    at run (D:\Work\OpenServer\domains\proks-form-frontend\node_modules\svelte\internal\index.js:22:12)
    at Array.forEach (<anonymous>)
    at run_all (D:\Work\OpenServer\domains\proks-form-frontend\node_modules\svelte\internal\index.js:28:9)
    at Object.render (D:\Work\OpenServer\domains\proks-form-frontend\node_modules\svelte\internal\index.js:1711:13)
    at render_response (file:///D:/Work/OpenServer/domains/proks-form-frontend/node_modules/@sveltejs/kit/dist/ssr.js:561:28)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async respond$1 (file:///D:/Work/OpenServer/domains/proks-form-frontend/node_modules/@sveltejs/kit/dist/ssr.js:1377:4)
    at async render_page (file:///D:/Work/OpenServer/domains/proks-form-frontend/node_modules/@sveltejs/kit/dist/ssr.js:1454:19)
    at async resolve (file:///D:/Work/OpenServer/domains/proks-form-frontend/node_modules/@sveltejs/kit/dist/ssr.js:1717:10)

`"svelte-file-dropzone": "0.0.16-dev.0",`

It didn't help, the error persisted(

[thecodejack]

is it possible to provide a reproducible link? like a repo ? Or atleast branch out master and reproduce with svelte-kit example available?

[AbramovYuri]

https://github.com/AbramovYuri/dropzone-example.git

Delete this code to reproduce the error

[skanel]

i am using sveltekit , this solution works for me, thanks

[thecodejack]

Thanks for reproducer @AbramovYuri

[thecodejack]

ok...looks like this can be sveltekit issue also. I am guessing code inside onDestroy expected to run in browser just like onMount. I remember moving global window code to life events just to make it SSR compatible via sapper. Should have worked same with sveltekit.

Anyways I will also debug via reproducer code shared by @AbramovYuri, to check if I can fix it in anyway that this is SSR compatible.

[thecodejack]

[email protected] should fix the issue. But the component is using sveltekit internals(https://kit.svelte.dev/docs#modules-$app-env). This is breaking storybook. Working on fixing same.

I am at present fine to use sveltekit internal API to add SSR support, as long as it doesn't break storybook docs & svelte REPL.

Let know if you feel different.

[thecodejack]

Raised issue with REPL to add support sveltejs/svelte.dev#844

[AbramovYuri]

thank you, it helped me, now I don't need to disable ssr anymore, the error is gone)

[PlkMarudny]

This line:

import { browser } from "$app/env"

is incompatible with a regular Svelte application (when no SvelteKit is used), it throws the error during compilation.

[thecodejack]

yes..I am not going to publish a standard release, mostly until there is a package exposed.

[thecodejack]

.

[thecodejack]

This should have been fixed with v1 release.

[Tal500]

fixed in sveltejs/sites#105