"Function called outside component initialization" when using URQL with SvelteKit production server (dev server works fine)

Describe the bug

I’m experiencing an interesting bug in which using URQL on the client-side throws a “Function called outside component initialization” error… however, it only happens after building a production build with the Node adapter. If I run my code using the dev environment my site loads fine. I’m curious about the difference between how the two servers are run that could hint as to what is happening here.

I started a discussion over on https://github.com/FormidableLabs/urql/issues/1938, but as I’m not sure if the issue lies with SK or URQL, I figured I’d cover both bases. A little bit more context can be found in the linked ticket, but overall, this is the issue I’m facing.

Reproduction

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

Logs

Error: Function called outside component initialization
    at get_current_component (file:///Users/tnickerson/base/urql-repro/node_modules/svelte/internal/index.mjs:938:15)
    at setContext (file:///Users/tnickerson/base/urql-repro/node_modules/svelte/internal/index.mjs:968:5)
    at setClient (file:///Users/tnickerson/base/urql-repro/node_modules/@urql/svelte/dist/urql-svelte.mjs:155:3)
    at file:///Users/tnickerson/base/urql-repro/.svelte-kit/output/server/app.js:1532:3
    at Object.$$render (file:///Users/tnickerson/base/urql-repro/.svelte-kit/output/server/app.js:1327:18)
    at Object.default (file:///Users/tnickerson/base/urql-repro/.svelte-kit/output/server/app.js:1385:117)
    at file:///Users/tnickerson/base/urql-repro/.svelte-kit/output/server/app.js:1494:42
    at Object.$$render (file:///Users/tnickerson/base/urql-repro/.svelte-kit/output/server/app.js:1327:18)
    at file:///Users/tnickerson/base/urql-repro/.svelte-kit/output/server/app.js:1384:78
    at $$render (file:///Users/tnickerson/base/urql-repro/.svelte-kit/output/server/app.js:1327:18)

System Info

System:
    OS: macOS 11.5.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 2.20 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.4 - /var/folders/yh/cv0rc4pd0px2xktclp4yt49h0000gq/T/fnm_multishells/44377_1631239888327/bin/node
    Yarn: 3.0.2 - ~/.yarn/bin/yarn
    npm: 6.14.14 - /var/folders/yh/cv0rc4pd0px2xktclp4yt49h0000gq/T/fnm_multishells/44377_1631239888327/bin/npm
  Browsers:
    Brave Browser: 93.1.29.77
    Chrome: 93.0.4577.63
    Firefox: 89.0.2
    Safari: 14.1.2
  npmPackages:
    @sveltejs/adapter-node: next => 1.0.0-next.45 
    @sveltejs/kit: next => 1.0.0-next.162 
    svelte: ^3.42.4 => 3.42.4

Severity

blocking all usage of SvelteKit

Additional Information

I’m aware that this topic has been discussed at length in both communities (using URQL with SvelteKit), but in this particular case I’m not attempting to run any code on the server, and am following all of the advice found in various discussions surrounding the use of URQL.

[dominikg]

svelte/ssr helps to avoid boilerplate code in onMount for SSR with client only dependencies. The fix on vite-plugin-svelte is the way to go 👍

[bluwy]

Dug into this today, the issue is that we add svelte to ssr.noExternal in vite-plugin-svelte during build here. Per the comment, it’s needed so we can resolve svelte as svelte/ssr. But this breaks for @urql/svelte since it, in turn, imports svelte, but @urql/svelte itself is externalized so we never got to resolve it’s imported svelte to svelte/ssr, causing two Svelte instances running hence the error.

You can observe the behaviour by building the repro repo, and open .svelte-kit/output/server/app.js. Notice we bundled setContext, and we also import @urql/svelte, which it’s setClient function isn’t using our bundled setContext.

---

Workaround

1. Set config.kit.vite.ssr.noExternal to ['@urql/svelte']. vite-plugin-svelte could automate this by checking deps with svelte as peer dep.
2. Or set config.kit.vite.ssr.external to ['svelte']. You won’t get the benefits of https://github.com/sveltejs/svelte/issues/6372 though

---

Honestly, I don’t think svelte/ssr was the right path all along, but the work has been done. cc @dominikg