Svelte 5: Runes $effect does not allow async function

[Dudek-AMS]

Describe the bug

Typescript throws error when using an async function in $effect since it expects a void function

Reproduction

   $effect(async () => {
        let res = await fetch(location.href, {
            method: 'POST',
            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify({action: 'validatemail', email})
        });
        error = await res.json();
    });

Logs

Svelte: Argument of type () => Promise<void> is not assignable to parameter of type () => void | (() => void)
Type Promise<void> is not assignable to type void | (() => void)

System Info

@next.85

Severity

annoyance

[brunnerh]

This is intentional, tracking of dependencies does not work as maybe expected with async code.
(Anything after the first await will not be tracked.)

Duplicate of:

• Add async functions to the $effect parameter type #10498

[Dudek-AMS]

This seems also be the case when I use then semantic?

    let error : any = $state(null);

  $effect(() => {
        fetch(location.href, {
            method: 'POST',
            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify({action: 'validatemail', email})
        }).then(res => res.json()).then(data => {
            error = data;
        });
    });

    $effect(() => {
        console.log(error);
    })

the console.log(error) isnt triggered

[brunnerh]

True, but there isn't anything Svelte can do about this.
Anything outside the range of types is a documentation issue.

[brunnerh]

Assignment should still trigger reactivity.
Only dependencies are not tracked in async code.

Can you create a standalone reproduction in the REPL?

[Dudek-AMS]

NVM - its working - my mistake

so to have something async and make it reactive i have to inline the async function and do some magic with my dependencies manually?

    $effect(() => {
        dep1 && dep 2 && dep3;
        (async () => {
            //do magic here
        })();
    });

would it make sense to overload the functions to manually add additional dependencies to the $effect function?

$effect(myFn, [dep1, dep2, dep3]);

[brunnerh]

Evaluating the dependencies beforehand would be a good approach, though you should not use && since that will potentially skip latter dependencies. You can use dep1, dep2, dep3; instead.

Regarding the argument for listing dependencies, there is an existing issue:

• Allow opt-in explicit dependency tracking for $effect #9248

[Dudek-AMS]

Okay thanks for your feedback - im closing this issue on this point.