Skip to content

Hydrating mid-stream renders a nested Errored's fallback twice #4374

Closed

Description

@ryansolid

Found by the async app generator's hydration phase (#4371). Reproduces on next 5f60713.

function App() {
  const a = createMemo(async () => {
    await sleep(10);
    return 1;
  });
  const b = createMemo(() => {
    if (a() === 1) throw new Error("boom");
    return a();
  });
  return (
    <main>
      <Errored fallback={e => "[ROOT]"}>
        <Loading fallback="[LOAD]">
          <Errored fallback={e => "[OUTER]"}>
            <Errored fallback={e => "[INNER]"}>
              <span>{b()}</span>
            </Errored>
          </Errored>
        </Loading>
      </Errored>
    </main>
  );
}

The server streams the Loading's fragment as <!--!$-->[INNER], plus a's value and b's error.

  • Hydrate after the chunk arrives: <main>[INNER]</main>, which is correct.
  • Hydrate the shell, then apply the chunk (the client boots mid-stream): <main>[INNER][INNER]</main>. The fallback is inserted twice. The duplicate doesn't go away on later updates, and a sibling after the boundaries keeps its place after both copies.

Without the outer Erroreds (a single Errored directly in the Loading, no root Errored), both orders show [INNER] once.

Activity

  1. ryansolid commented on Oct 29, 2026

    @ryansolid
    MemberAuthor

    Fixed on next by #4382 (56eb192); it ships in the next RC.


    Generated by Claude Code

  2. added a commit that references this issue on Oct 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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