Skip to content

[Async] Spread imported pushState handler completely breaks page.state #15092

@colecrouter

Description

@colecrouter

Describe the bug

This is one wacky. It took me all afternoon and evening to figure it out, and I'm still not sure I know what's going on.

I had something like this:

/** Returns anchor attributes to open a dialog at the given href */
export const openDialog = (href: Pathname) => {
  const onclick = async (event: MouseEvent) => {
    event.preventDefault();
    event.stopImmediatePropagation();

    // Imagine this is copied and pasted from the "shallow nav" docs
    await shallowNavigate(href);
  };

  return {
    href,
    onclick,
  } satisfies Partial<HTMLAnchorAttributes>;
};

—used like this:

<a
	{...openDialog("/test")}
	class="btn btn-test"
>
	openDialog (spread)
</a>

Doing so results in page.state completely desychronizing from everything. Future updates to page.state fail to trigger reactivity. If you log it manually, it's updated.

Other Things of Note

  • This can be seemingly partially subverted by moving the affected code further up in the component tree (yikes), but runs into issues like this:
    {#if page.state.x !== undefined}
      <MyComponent data={page.state.x.whatever} />
      //                              ^ cannot read property "whatever" of undefined
    {/if}
  • This sometimes resolves itself once by reloading on a page, then soft-navigating back
  • This only occurs with experimental async enabled
  • Tried this with .svelte.ts file

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-ckxtrshn

Logs

No logs directly related to the bug

System Info

System:
    OS: Windows 11 10.0.26200
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700K
    Memory: 3.39 GB / 15.72 GB
  Binaries:
    Node: 24.11.0 - C:\nvm4w\nodejs\node.EXE
    npm: 11.6.1 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Chrome: 143.0.7499.169
    Edge: Chromium (140.0.3485.54)
    Internet Explorer: 11.0.26100.7309
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^6.2.1 => 6.2.1
    rolldown-vite:  7.2.5
    svelte: ^5.43.8 => 5.45.10

I tried on my work MacBook, phone, etc. Latest Svelte/kit, older versions, etc.

Severity

serious, but I can work around it

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions