svelte-kit: using initClient throws with Error: Function called outside component initialization

[frederikhors]

urql version & exchanges: "@urql/svelte": "1.2.2"

Reproduction

https://github.com/frederikhors/issue-urql-svelte-kit

Steps to reproduce

1. npm run dev

2. open http://localhost:3000/

Actual behavior

I'm using https://kit.svelte.dev/docs#introduction-getting-started (npm init svelte@next my-app) with the code taken from https://github.com/FormidableLabs/urql/tree/main/examples/with-svelte/src but it throws in console with:

[HMR][Svelte] Unrecoverable error in <__layout>: next update will trigger a full reload
logError @ proxy.js:15
Proxy<__layout> @ proxy.js:372
create_fragment @ root.svelte? [sm]:36
init @ index.mjs?v=57ffec67:1500
Root @ root.svelte? [sm]:16
createProxiedComponent @ svelte-hooks.js:245
ProxyComponent @ proxy.js:241
Proxy<Root> @ proxy.js:341
_init @ start.js:649
start @ start.js:533
async function (async)
start @ start.js:486
start @ start.js:1099
(anonymous) @ (index):221
index.mjs:649 Uncaught (in promise) Error: Function called outside component initialization
    at get_current_component (index.mjs:649)
    at setContext (index.mjs:679)
    at setClient (context.ts:13)
    at initClient (operations.ts:37)
    at instance (__layout.svelte? [sm]:4)
    at init (index.mjs?v=57ffec67:1485)
    at new _layout (__layout.svelte? [sm]:23)
    at createProxiedComponent (svelte-hooks.js:245)
    at new ProxyComponent (proxy.js:241)
    at new Proxy<__layout> (proxy.js:341)

(the only running code is in https://github.com/frederikhors/issue-urql-svelte-kit/blob/master/src/routes/__layout.svelte)

Why?

[frederikhors]

@babichjacob here said we cannot use initClient because of setContext call, but why?

[kitten]

Happy to reopen this if I'm wrong, but this isn't related to urql.

Since you're already asking them the question and none of us have really worked on SvelteKit, I'd assume they can help you.

They're referring to calling initClient in load btw which isn't correct as that's not a component but a load function for a component. However there the client can be used from an outside closure variable.

Furthermore, we simply don't support SvelteKit yet but have an RFC on extending our API surface for the load function.

However, this isn't a bug issue or report. 😅 if you follow an obviously working code snippet 1:1 and you copy it to a different runner (like Vite to SvelteKit) and it then stops working that's because of something there. I'd assume "layout" is maybe a special component and you can't introduce context there. Probably because it's static-only

[frederikhors]

So can we say with certainty that @urql-svelte does NOT work with SvelteKit?

[frederikhors]

I'm not using the load function.

I'm trying that code not only in __layout.svelte, in other simple components too.

[frederikhors]

If I use setContext(_contextKey, client); in my __layout.svelte file it works.

initClient is the problem here. Hence the question.

Maybe it's a simple issue that you, geniuses, can fix immediately.

[JonatanLindstrom]

Hey! As noted in the documentation for Svelte bindings you might have issues when using Vite as your bundler, which is something that SvelteKit does. The workaround is to add the following config:

vite: {
  optimizeDeps: {
    exclude: ['@urql/svelte'],
  }
}

Normally this would be in a vite.config.js but when using SvelteKit, you want to add this as a key to kit in svelte.config.js. I added a pull request to your reproduction repo to make it clear what I mean. With that config, I can use initClient in my application.

[irg1008]

Adding optimizeDeps option is not working for me using SvelteKit

[disbelief]

Same, I see that Function called outside component initialization error regardless if the optimizeDeps.exclude config is present or not.

[frederikhors]

Please remove node_modules, update SvelteKit to the latest and npm install again. It works!

[disbelief]

@frederikhors just did that same problem. Here's my system info:

  npmPackages:
    @sveltejs/adapter-netlify: ^1.0.0-next.29 => 1.0.0-next.29 
    @sveltejs/kit: ^1.0.0-next.158 => 1.0.0-next.158 
    svelte: ^3.42.1 => 3.42.1

Can you paste an example snippet of your code?

[disbelief]

I think I got it working. I was calling the initClient and getClient functions from within onMount which seems to be raising the above error. Moving them to the main scope of the component removes the errors and I can see the client being instantiated (haven't tried using it yet, that's next 😉 )