"Function called outside component initialization" when using SvelteKit production server only (dev server works)

[Nickersoft]

Hey all!

I know SvelteKit support for @urql/svelte is kind of iffy at this stage (esp with SSR support) I noticed some odd behavior when trying to just use URQL with client-side Svelte. I'm specifically just using URQL on the client-side, AFAIK (inside a <script> tag, without context="module"). This works perfectly when using the dev server, using svelte-kit dev.

However, after building a production bundle using the Node adapter and attempting to preview the site, I get hit with a "Function called outside component initialization" error. I'm relatively new to Svelte and am not sure of the differences between how the dev vs. node server are run. Wondering if anyone else has encountered this issue.

Happy to ask the SvelteKit folks as well, but given the relative youth of both URQL and SvelteKit, it's hard for me to say whether this is a bug, a missing feature, or just a misuse of either framework.

urql version & exchanges:

• @urql/core: 2.3.1
• @urql/svelte: 1.3.0

Steps to reproduce

I managed to reproduce the issue in https://github.com/Nickersoft/urql-repro. Just be sure to run yarn first.

• To check the dev server: yarn dev
• To check the production build: yarn build && yarn preview

Expected behavior
I'd imagine URQL to run client-side in both cases, avoiding the above error which is often caused by calling setContext() on the server.

Actual behavior
Dev server works, production build does not

[JoviDeCroock]

Hey,

There are some other issues with information concerning this:

• RFC: svelte-urql: enable to query in SvelteKit load() function #1819
• svelte-kit: using initClient throws with Error: Function called outside component initialization #1660

A few solutions related to the vite-exclude deps setting and others were a mis-use 😅 generally the first one sheds light on a possible solution and the latter a bunch of troubleshooting.

As SvelteKit is quite young we haven't provided any specialized methods in fear of interfering with regular Svelte workings. Personally I'd say if there's a difference between build and dev that's better to look on their side what could be causing this.

[Nickersoft]

Hey @JoviDeCroock! Thanks for the quick response... I forgot to add it to my reproduction, but on my other codebase I am using the excludeDeps option as mentioned in the docs and still receiving the error. I had looked around before deciding to open this issue. The discussion in #1819 seems to suggest that accessing the client inside a non-module level <script> tag, without optimizeDeps, outside of the onMount() lifecycle method would work. This repro follows those credentials and still doesn't work in production mode, which is why I thought I'd report it lol. I was surprised to see it only work for the dev server, not for a production build. I can also ping the folks over on the /kit repo and ask about this to help investigate.

[bluwy]

With sveltejs/kit#2397 resolved, it should work without any configuration now. So this issue can be closed.

[JoviDeCroock]

Thanks @bluwy for the heads up!