"window is not defined" error (SvelteKit)

Question

"window is not defined" error (SvelteKit)

tomgenoni opened this issue 4 years ago · 21 comments

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 commented 3 years ago

.

Answer 1 · 2022-01-01T07:12:24.000Z

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

Answer 2 · 2022-01-01T07:44:49.000Z

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

Answer 3 · 2022-01-01T07:45:24.000Z

By any chance is your app using TS?

Answer 4 · 2022-01-02T14:22:05.000Z

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

Answer 5 · 2022-01-03T10:24:11.000Z

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>

Answer 6 · 2022-01-03T10:57:51.000Z

ok let me add a condition to avoid same.

Answer 7 · 2022-01-03T11:32:04.000Z

please check with svelte-file-dropzone@0.0.16-dev.0 and let me know if that fixes the issue

Answer 8 · 2022-01-03T14:40:23.000Z

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(

Answer 9 · 2022-01-04T15:25:43.000Z

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

Answer 10 · 2022-01-04T20:56:05.000Z

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

Delete this code to reproduce the error

Answer 11 · 2022-01-05T12:07:10.000Z

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

Answer 12 · 2022-01-05T13:22:33.000Z

Thanks for reproducer @AbramovYuri

Answer 13 · 2022-01-05T13:23:30.000Z

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.

Answer 14 · 2022-01-05T14:04:48.000Z

svelte-file-dropzone@1.0.0-dev.1 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.

Answer 15 · 2022-01-05T14:12:33.000Z

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

Answer 16 · 2022-01-11T13:31:59.000Z

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

Answer 17 · 2022-01-13T13:05:53.000Z

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.

Answer 18 · 2022-01-18T14:49:11.000Z

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

Answer 19 · 2022-08-07T12:25:10.000Z

This should have been fixed with v1 release.

Answer 20 · 2022-08-07T12:30:46.000Z

fixed in sveltejs/sites#105