search

urql-graphql / urql-devtools-exchange

The exchange for usage with Urql Devtools
https://www.npmjs.com/package/@urql/devtools
MIT License
54 stars 6 forks source link

Error when using as an SSR module in SvelteKit #119

Closed qbunt closed 2 years ago

qbunt commented 2 years ago

We're seeing the following error when using the devtools exchange within sveltekit as a module. For example, I have a gql.js file in which I'm setting up urql and all related exchanges, but when I pull that into a __layout.js and set it up, I'm getting the following error.

TypeError: window.addEventListener is not a function
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:240:12
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:257:4
    at Object.<anonymous> (/Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:258:2)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
4:55:21 PM [vite] Error when evaluating SSR module /src/routes/__layout.svelte:
TypeError: window.addEventListener is not a function
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:240:12
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:257:4
    at Object.<anonymous> (/Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:258:2)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
window.addEventListener is not a function
TypeError: window.addEventListener is not a function
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:240:12
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:257:4
    at Object.<anonymous> (/Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:258:2)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
window.addEventListener is not a function
TypeError: window.addEventListener is not a function
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:240:12
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:257:4
    at Object.<anonymous> (/Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:258:2)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)

From the looks of it, when I do that, this exchange is relying on window to be available as part of the document, but in this context, that's not true. Maybe to fix, this could be wrapped in a try/catch first so it doesn't fire on the server-side, but does work on the client side.

qbunt commented 2 years ago

I should also add that this error only fires the very first time after you start the dev server, after that, it starts working normally. Bizarre

qbunt commented 2 years ago

no longer an issue, maybe this was a sveltekit bug