[🐞] v2: `fastInsertBefore` errors in certain navigation scenarios

[Ionaru]

Which component is affected?

Qwik City (routing)

Describe the bug

Under certain scenarios, navigation through a <Link> element throws an error related to the Node.insertBefore function inside fastInsertBefore.

The result is that the navigation does not happen cleanly, and the elements in the resulting page can appear out of order or with incorrect styling.

Error in Chrome:

Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at fastInsertBefore (core.prod.mjs?v=6de22920:3086:87)
    at flush (core.prod.mjs?v=6de22920:3097:17)
    at _flushJournal (core.prod.mjs?v=6de22920:3152:5)
    at executeFlushPhase (core.prod.mjs?v=6de22920:3079:39)
    at finishWalk (core.prod.mjs?v=6de22920:3282:67)
    at walkCursor (core.prod.mjs?v=6de22920:3277:5)
    at processCursorQueue (core.prod.mjs?v=6de22920:3206:9)

Uncaught (in promise) TimeoutError: Transition was aborted because of timeout in DOM update

Error in Firefox:

 Uncaught DOMException: Node.insertBefore: Child to insert before is not a child of this node
    fastInsertBefore core.prod.mjs:3086
    flush core.prod.mjs:3097
    _flushJournal core.prod.mjs:3152
    executeFlushPhase core.prod.mjs:3079
    finishWalk core.prod.mjs:3282
    walkCursor core.prod.mjs:3277
    processCursorQueue core.prod.mjs:3206
    createMicroTask core.prod.mjs:3173
    triggerCursors core.prod.mjs:3193
    walkCursor core.prod.mjs:3272
    walkCursor core.prod.mjs:3271
    processCursorQueue core.prod.mjs:3206
    createMicroTask core.prod.mjs:3173
    triggerCursors core.prod.mjs:3193
    walkCursor core.prod.mjs:3272
    walkCursor core.prod.mjs:3271
    processCursorQueue core.prod.mjs:3206
    createMicroTask core.prod.mjs:3173
    triggerCursors core.prod.mjs:3193
    walkCursor core.prod.mjs:3272
    walkCursor core.prod.mjs:3271
    processCursorQueue core.prod.mjs:3206
    createMicroTask core.prod.mjs:3173
    triggerCursors core.prod.mjs:3193
    addCursor core.prod.mjs:3346
    markVNodeDirty core.prod.mjs:3496
    scheduleEffect core.prod.mjs:6511
    scheduleEffects core.prod.mjs:6536
    force core.prod.mjs:687
    navigate index.qwik.mjs:885
    startViewTransition index.qwik.mjs:411
    _waitNextPage index.qwik.mjs:892
    run index.qwik.mjs:902
    useQwikRouter_useTask_XCAatFh0f8c index.qwik.mjs:932
    invokeApply core.prod.mjs:4520
    invoke core.prod.mjs:4513
    bound core.prod.mjs:7112
    bound core.prod.mjs:7101
    promise callback*bound core.prod.mjs:7097
    runTask core.prod.mjs:6445
    safeCall core.prod.mjs:260
    runTask core.prod.mjs:6445
    executeTasks core.prod.mjs:2969
    walkCursor core.prod.mjs:3245
    processCursorQueue core.prod.mjs:3206
    createMicroTask core.prod.mjs:3173
    triggerCursors core.prod.mjs:3193
    addCursor core.prod.mjs:3346
    markVNodeDirty core.prod.mjs:3496
    scheduleEffect core.prod.mjs:6530

 Uncaught (in promise) DOMException: Skipped ViewTransition due to timeout 

In my reproduction repository I have stripped away as much stuff as possible with the error still appearing when clicking on "navigate" on the home
screen.

While testing I noticed that many seemingly unrelated changes will "fix" the error:

• Removing const id = idValue?.id; from src/routes/layout.tsx
• Removing the <Footer> element from src/routes/layout.tsx
• Removing the <SignalSpan> element from src/routes/foo/index.tsx
• Removing the submit button from src/routes/foo/index.tsx
• Removing <Link href="/"><button>Back</button></Link> from src/routes/foo/index.tsx

I have no idea what is causing this error, all the different changes that fix it make it very confusing. I hope the provides information helps.

Reproduction

https://github.com/Ionaru/qwik-node-insertbefore-error

Steps to reproduce

1. Run bun create qwik@latest empty qwik-node-insertbefore-error
2. Run cd qwik-node-insertbefore-error
3. Run bun install
4. Run bun run qwik migrate-v2
5. ??? (add elements that seem to do nothing strange)
6. Navigate from / to /foo
7. See Failed to execute 'insertBefore' on 'Node'

System Info

System:
    OS: Windows 11 10.0.26200
    CPU: (32) x64 AMD Ryzen 9 3950X 16-Core Processor
    Memory: 12.05 GB / 31.93 GB
  Binaries:
    Node: 22.20.0 - C:\Users\Jeroen\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Users\Jeroen\scoop\apps\nvm\current\nodejs\nodejs\yarn.CMD
    npm: 11.9.0 - C:\Users\Jeroen\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
    pnpm: 10.26.2 - C:\Users\Jeroen\scoop\apps\nvm\current\nodejs\nodejs\pnpm.CMD
    bun: 1.3.8 - C:\Users\Jeroen\.bun\bin\bun.EXE
    Deno: 2.6.8 - C:\Users\Jeroen\.deno\bin\deno.EXE
  Browsers:
    Chrome: 144.0.7559.133
    Edge: Chromium (140.0.3485.54)
    Internet Explorer: 11.0.26100.7309
  npmPackages:
    @qwik.dev/core: 2.0.0-beta.19 => 2.0.0-beta.19
    @qwik.dev/router: 2.0.0-beta.19 => 2.0.0-beta.19
    typescript: 5.4.5 => 5.4.5
    undici: * => 7.21.0
    vite: 7.3.1 => 7.3.1

Additional Information

No response

[omerman]

+1 Happened to me too 😢