Top level await breaks stores as of 5.38.3

[dangodai]

Describe the bug

Using a top level await causes any stores created in the same script to be undefined when accessed in the template. This seems to have been introduced with v5.38.3.

await inside of the template works fine. The order of code in the script does not matter (i.e. awaiting before or after creating the store doesn't matter).

Reproduction

REPL: https://svelte.dev/playground/72abfb8ea2a7418ab7454ef9fee42569?version=5.38.6

Run the following component, and observe the error.

<script>
	import { writable } from 'svelte/store';

	await Promise.resolve();
	const count = writable(0);
</script>

{$count}

Logs

Log taken from loading the above REPL

Uncaught (in promise) ReferenceError: count is not defined

  in <unknown>
  in App.svelte
  in __wrapper.svelte
    $count playground:output:4903
    App playground:output:4918
    template_effect playground:output:3262
    update_reaction playground:output:3756
    update_effect playground:output:3936
    create_effect playground:output:3140
    template_effect playground:output:3262
    flatten playground:output:1533
    template_effect playground:output:3261
    App playground:output:4918
    async_body playground:output:1622
    App playground:output:4907
    __wrapper playground:output:4944
    add_svelte_meta playground:output:602
    __wrapper playground:output:4944
    <anonymous> playground:output:1011
    update_reaction playground:output:3756
    update_effect playground:output:3936
    create_effect playground:output:3140
    branch playground:output:3283
    <anonymous> playground:output:1011
    update_reaction playground:output:3756
    update_effect playground:output:3936
    create_effect playground:output:3140
    block playground:output:3271
    Boundary playground:output:1004
    boundary playground:output:922
    __wrapper playground:output:4943
    unmount playground:output:4470
    update_reaction playground:output:3756
    update_effect playground:output:3936
    create_effect playground:output:3140
    branch playground:output:3283
    unmount playground:output:4458
    update_reaction playground:output:3756
    update_effect playground:output:3936
    create_effect playground:output:3140
    component_root playground:output:3222
    _mount playground:output:4455
    mount playground:output:4402
    <anonymous> playground:output:4987
    <anonymous> about:srcdoc:45
    EventListener.handleEvent* about:srcdoc:30
    <anonymous> about:srcdoc:276

System Info

System:
    OS: Linux 6.15 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 7.74 GB / 15.54 GB
    Container: Yes
    Shell: 5.3.3 - /bin/bash
  Binaries:
    Node: 22.17.0 - ~/.nvm/versions/node/v22.17.0/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.17.0/bin/npm
    pnpm: 10.13.1 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 139.0.7258.66
  npmPackages:
    svelte: ^5.38.6 => 5.38.6

Severity

blocking an upgrade

[sillvva]

It happens pretty much no matter where you access the store with $ syntax, including the script.

However, you can still access the store methods: set, subscribe, and update.

In my code, this is what I'm currently doing that works:

<script lang="ts">
    import { page } from "$app/state";
    import AdminAPI from "$lib/remote/admin";
    import { queryParam, ssp } from "sveltekit-search-params";

    const s = queryParam("s", ssp.string(), {
        showDefaults: false
    });

    $inspect(s); // {set: f, subscribe: f, update: f}
    $inspect($s); // s is not defined

    const baseSearch = $derived(await AdminAPI.queries.getBaseSearch());
    // updates when s is set
    const value = $derived(page.url.searchParams.get("s")); 
    const logSearch = $derived(await AdminAPI.queries.getAppLogs(value ?? baseSearch.query));

    const debouncedSearch = debounce((value: string) => {
        // triggers goto and page state update
        s.set(value.trim() || null);
    }, 400);
</script>

Ideally it would be this, but both of these changes cause the error

const baseSearch = $derived(await AdminAPI.queries.getBaseSearch());
// breaks
const logSearch = $derived(await AdminAPI.queries.getAppLogs($s ?? baseSearch.query));

const debouncedSearch = debounce((value: string) => {
    // breaks
    $s = value.trim() || null;
}, 400);

[DePasqualeOrg]

I don't know if it's related to this issue, but in one of the releases after svelte@5.38.3, data loaded with the new async syntax silently fails to load.

[kroniapp]

It’s not just about stores — $effect also won’t run if there’s an await in the script.

Here’s a minimal reproduction: https://svelte.dev/playground/62a07bd82ad24a05ab61e34fadbe796b

Interestingly, if you add an #await block in the template (for example: {#await Promise.resolve()}{/await}), then it starts working again.

[kroniapp]

Ok, continuing with the tests I noticed that onMount isn’t working either — same issue as with $effect.

[dangodai]

@kroniapp see also #16582

However that issue predates 5.38.3, so I'm guessing the root cause is slightly different from this one.

There is also this one which seems very similar, but I haven't personally explored yet because other bugs are still blocking me: #16627

[Ocean-OS]

Ok, continuing with the tests I noticed that onMount isn’t working either — same issue as with $effect.

onMount's code is almost exactly the same as this

function onMount(fn) {
  $effect(() => {
    return untrack(fn);
  });
}

so it'd make sense that onMount wouldn't work here since $effect doesn't work here (even though it definitely should work)

[kroniapp]

@kroniapp see also #16582

Ah, I missed that — yes, I think it’s the same issue. I’ll keep following that one, thanks!

onMount's code is almost exactly the same as this

Oh, I see! I didn’t realize that until now.

[vladshcherbin]

Yep, onMount and $effect don't work when component has top level await

What do you use as a workaround, guys? I've tried 5.38.2 and 5.38.1 - same issue there