[🐞] v2: `cleanup` from `useVisibleTask$` does not run when navigating away from a route with a `layout.tsx`

[Ionaru]

Which component is affected?

Qwik City (routing)

Describe the bug

A route that has any layout.tsx file, will not run any cleanup function from useVisibleTask$.

Given 2 simple routes:

src/routes/index.tsx

import { component$, useVisibleTask$ } from "@qwik.dev/core";
import { Link } from "@qwik.dev/router";

export default component$(() => {
  useVisibleTask$(({ cleanup }) => {
    console.log("entry /");
    cleanup(() => {console.log("cleanup /")});
    return () => {console.log("return /")};
  });

  return (
    <div>
      <p>You are in /</p>
      <Link href={`/foo/`}>
        <button>To Foo</button>
      </Link>
    </div>
  );
});

src/routes/foo/index.tsx

import { component$, useVisibleTask$ } from "@qwik.dev/core";
import { Link } from "@qwik.dev/router";

export default component$(() => {
  useVisibleTask$(({ cleanup }) => {
    console.log("entry /foo");
    cleanup(() => {console.log("cleanup /foo")});
    return () => {console.log("return /foo")};
  });

  return (
    <div>
      <p>You are in /foo</p>
      <Link href={`/`}>
        <button>To Root</button>
      </Link>
    </div>
  );
});

src/routes/foo/layout.tsx

import { component$, Slot } from "@qwik.dev/core";

export default component$(() => {
  return <Slot />;
});

When navigating between the routes by clicking the button, src/routes/index.tsx does run its cleanup functions, but src/routes/foo/index.tsx does not.

After deleting src/routes/foo/layout.tsx, the cleanup functions suddenly do run.

These cleanup functions should run regardless of the route containing a layout.tsx or not.

Reproduction

https://github.com/Ionaru/qwik-layout-route-cleanup

Steps to reproduce

1. Run bun create qwik@latest with all default options
2. Run cd qwik-app
3. Run bun run qwik migrate-v2
4. Add a new folder foo in /src/routes
5. Add a index.tsx and layout.tsx
6. Add an empty layout to layout.tsx
7. Add a useVisibleTask$ in `index.tsx with some logging statements
8. Add buttons to index.tsx to navigate between the routes
9. Run bun run dev
10. Navigate between the routes, notice that /foo never runs the cleanup functions, but / does

(below steps are optional)

11. Stop the dev server
12. Delete src/routes/foo/layout.tsx
13. Run bun run dev
14. Navigate between the routes, notice that both routes run their cleanup functions

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

[Varixo]

hey the issue should be fixed by #8358