awaiting goto() same page in load causes duplicate #if content
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}
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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