Duplication of {#each} items with experimental async
#17261
Development PRs
The problem comes down to $.async wrapping a component and being the sole child of a block (if, snippet prop, etc). Normally, said component would either have no content at all, and therefore nothing to advance with respect to hydration nodes, or call $.append() at the end which advances it past the closing hydration anchor. But when $.async wraps it, there's now an additional comment pair surrounding them, and it's not advancing past those - so the next hydration walk assumes its now past the closing marker when it isn't. For this we need to add $.next() after $.async()
Also fixes #17618
The problem here is very related (hence amended to the PR) where with fast-path, it is unknown to us within $.async whether or not the marker will advance to the closing marker of $.async - with a component as its child it will (because of the $.append inside it), with an if block for example it will not (because the if block logic will stop at its closing marker). We cannot know which case it is hence we advance to the end marker before calling the inner function in $.async, to then definitly set $.async's closing marker.
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
This is basically #17611, minus #17640, plus #17639. We need to add the $.next() call after render tags as well as components; rather than duplicating the logic, we can use is_standalone to determine when this is necessary (since this is what prevents $.append(...) from being used).
Before submitting the PR, please make sure you do the following
- It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
- Prefix your PR title with
feat:,fix:,chore:, ordocs:. - This message body should clearly illustrate what problems it solves.
- Ideally, include a test that fails without this PR but passes with it.
- If this PR changes code within
packages/svelte/src, add a changeset (npx changeset).
Tests and linting
- Run the tests with
pnpm testand lint the project withpnpm lint
Issue
Describe the bug
Since v5.43.0, some items in an {#each} block are duplicating in a specific scenario related to the experimental async syntax. All awaited items except the first appear a second time (eg. item 1, item 2, item 3, item 2, item 3). The items are not duplicated in the SSR ouput (in a SvelteKit app), the duplicated items are only added on client load, it appears.
Note: This only occurs in a production build, not in development. No errors/warnings are logged. The issue does not occur in v5.42.3 or below.
Reproduction
The following is a minimal reproduction of an issue I am encountering in a real app. The issue does not occur if const another = {...} (L5) is moved before const messages = await ... (L4), if another is not passed to the component, or if the <p>{message}</p> is defined directly in the {#each} block, instead of in a seperate component.
Playground:
(you need to use it with hydration locally in the playground to reproduce; for an in-browser reproduction see https://stackblitz.com/edit/sveltejs-kit-template-default-es5urw13?file=src%2Froutes%2F%2Bpage.svelte)
Logs
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 20.19.1 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 10.8.2 - /usr/local/bin/npm
pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
svelte: 5.43.0 => 5.43.0Severity
blocking an upgrade
Info
Pro tip: You can prefix GitHub URLs of issues, PRs or discussions with svcl.dev/ to view them on this page! Also try it on a GitHub release ;)