Skip to content

Top level await prevents onMount, bind:this from running #16582

@dangodai

Description

@dangodai

Describe the bug

When using a top level await inside of a <script> tag both onMount and elements with bind:this will not run, despite all promises in the script tag resolving. I suspect onMount and bind:this run at roughly the same time internally and are being blocked by a single issue.

Reproduction

Reproduction of both issues can be found here:

https://www.sveltelab.dev/695vn9wj60ay38q?files=.%2Fsrc%2Froutes%2F%2Bpage.svelte

Observe that

  1. The button bound to myButton is undefined. This is shown both in the markup and by clicking the button to log the value of myButton
  2. onMount has not run. This is shown both in the markup and by the absence of the log printed inside of onMount
  3. Removing the await ... line causes both issues to go away

Oddly, when navigating to the second page /page2 (which you can navigate to using the buttons) the onMount function from the first page will finally run. Navigating back to / will result in onMount and bind:this functioning seemingly correctly.

Logs

System Info

System:
    OS: Linux 6.15 Arch Linux
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 6.02 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.0 => 5.38.0

Severity

blocking an upgrade (to async svelte)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions