SvelteKit - Function called outside component initialization

[inzanez]

Hi

I'm trying to use sswr with a newly created SvelteKit project, building with the node adapter. I have added some simple test after having had issues:

    import { useSWR } from 'sswr';

    try {
        const { data } = useSWR('http://jsonplaceholder.typicode.com/posts/1');
    } catch(e) {
        console.log(e);
    }

test to a

• route
• component

and I always get back the same error:

Error: Function called outside component initialization
    at get_current_component (index.mjs:813)
    at onMount (index.mjs:820)
    at l.useSvelte (index.js:1)
    at useSWR (index.js:1)
    at instance ([dialogId].svelte:42)
    at init (index.mjs?v=99bae134:1660)
    at new U5BdialogIdu5D ([dialogId].svelte:153)
    at createComponent (svelte-hooks.js:136)
    at U5BdialogIdu5D.targetCmp.$replace (svelte-hooks.js:183)
    at refreshComponent (proxy.js:170)

Any idea why that might be?

[ConsoleTVs]

What is this node adapter?

[inzanez]

Basically a build adapter that will result in an application build for NodeJs instead of a static file build.

[inzanez]

Ok, looking a bit more into this, it does seem that this doesn't work with SvelteKit yet. Any idea why that might be? I just started a new project using

npm init svelte@next my-app
cd my-app
npm install
npm run dev

and tried to run the sample code, resulting in the same error described above.

[frederikhors]

Same here with SvelteKit.

I'm not using node adapter.

So, the adapter is not the problem here.

I think we should initialize sswr before using it and use it with setContext/getContext.

[frederikhors]

Using the steps in https://kit.svelte.dev/docs#introduction-getting-started

you can try yourself: it doesn't work.

[ConsoleTVs]

Strange, last time I checked it worked... I'll check

[ConsoleTVs]

I just tried and it does work... 😕

Fresh install and everything...

[frederikhors]

Can you please create an example directory with the new Svelte Kit Demo project and sswr?

[ConsoleTVs]

Wait, I just double checked by installing the remote pkg and you're right it fails. I'm going to see what's going on here... Thanks for the error report, seems it worked fine with my local pkg :D

[frederikhors]

Do you have any news on this, @ConsoleTVs?

[ConsoleTVs]

I tries to fix it and i was unable to. I got to the conclusion thst it might either be a bundle issue or something related. I am not an expert but sveltekit api is not yet stable either and it is due change, ao i might either wait for some PR from people who know more about the internals, wait for sveltekit to be stable or in short, have some more free time to allocate to this

[benbender]

It's not a bug in this package, but in sveltekit. I saw the same problem on my own tinkering with react-query - so I opened a bug in sveltekit. See https://github.com/sveltejs/kit/issues/2147.

Btw, it only happens when both preconditions are true: a) lifecycle-method called inside an installed package. b) in dev-mode.

It works in svelte-repl though. So its likely a problem with the vite-dev-server.

PS: You can circumvent the bug for now by installing swrev and copy sswr to your local $lib-folder and import it from there.

[ConsoleTVs]

It's not a bug in this package, but in sveltekit. I saw the same problem on my own tinkering with react-query - so I opened a bug in sveltekit. See https://github.com/sveltejs/kit/issues/2147.

Btw, it only happens when both preconditions are true: a) lifecycle-method called inside an installed package. b) in dev-mode.

It works in svelte-repl though. So its likely a problem with the vite-dev-server.

PS: You can circumvent the bug for now by installing swrev and copy sswr to your local $lib-folder and import it from there.

That could explain why my local symlinked pkg was working lol

[frederikhors]

I think this fix it (for now): https://github.com/ConsoleTVs/sswr/pull/11.

Can we close this?

[ConsoleTVs]

Yes, I hope this will be fixed in the future by svelte plugin authors. Great work!