sveltejs / sveltejs/kit

awaiting goto() same page in load causes duplicate #if content

Open
#10,469 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

Having this in a client-side load function (e.g. to clear query params):

await goto(`${url.pathname}`, { replaceState: true });

leads to duplicate content in {#if}'s when the condition becomes true at runtime. E.g.

<script>
  let yep = false;
</script>

<button on:click={() => yep = true}>Show</button>

{#if yep}
  Yeho
{/if}

image

Reproduction

https://github.com/myieye/svelte-double-content-bug

Logs

No response

System Info
System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 5825U with Radeon Graphics
    Memory: 7.63 GB / 22.83 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 7.5.2 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Spartan (44.22621.1992.0), Chromium (115.0.1901.188)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0
    @sveltejs/kit: ^1.20.4 => 1.22.4
    svelte: ^4.0.5 => 4.1.2
    vite: ^4.4.2 => 4.4.8
Severity

serious, but I can work around it

Additional Information

A workaround seems to be to simply not await the goto() call:

goto(`${url.pathname}`, { replaceState: true });

I observed that:
When the await is present, the load function runs twice.
Without the await, the load function only runs once.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction and inspect the client-side load function that awaits goto() with replaceState. Compare the behavior with and without await, focusing on why the load function runs twice and duplicates the {#if} content. Done means the same-page awaited navigation no longer creates duplicate content.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.