[File-based] Loader does not properly mange rejection

[eLeontev]

Describe the bug

adding of throw new Error() in router at least the sibling routes became broken (error component renders in regular routes)

Your Example Website or App

Sandbox: https://stackblitz.com/edit/tanstack-router-bsa23m?file=src%2Froutes%2Fdashboard.invoices.%24invoiceId.tsx

Video: https://drive.google.com/file/d/1raxV3aRyBYiofhqNS4qCf0Lx6lyKzENy/view?usp=sharing

Steps to Reproduce the Bug or Issue

1. prepare any route with dynamic url e.g. $invoice-id.tsx
2. add errorComponent to the route created by createFileRoute
3. add notFoundComponent to the route created by createFileRoute
4. add loader functionality with throw error scenarios

expected router configuration: e.g.

{
  errorComponent: () => <>Error</>,
  notFoundComponent: () => <>Not Found</>,
  loader: ({params}) => { // note in sample it was marked as `async` if it can affect reproduction please add it 
    if (params.paramId === 1) {
      throw new Error();
    }

    if (params.paramId === 2) {
      throw notFound();
    }
}

5. prepare links to be able to redirect to 3 routes: 1 with error component, 2 with not found component and 3 with regular component
6. build dev server and go to route with invoiceIds
7. navigate between routes

• 2 -> 3
• 3 -> 2
• 2 -> 1
• 1 -> 2
• 1 -> 3

Actual behavior: redirects from id 1 with error component breaks the rendering of it's siblings e.g. continue to render Error component for id 2 and 3.

Expected behavior

The content of each route in tests should be consistent and predictable based on the loader logic: redirect to id = 1 -> renders error component redirect to id = 2 -> renders not found component redirect to id = 3 -> renders regular component

Screenshots or Videos

No response

Platform

MacOS / Chrome: latest package:

"dependencies": {
    "@tanstack/react-query": "^5.17.8",
    "@tanstack/react-query-devtools": "^5.17.8",
    "@tanstack/react-router": "^1.16.0",
    "@tanstack/router-devtools": "^1.16.0",
    "@tanstack/router-vite-plugin": "^1.16.1",
    "axios": "^1.6.5",
    "immer": "^10.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/react": "^18.2.47",
    "@types/react-dom": "^18.2.18",
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.0.12"
  }

Additional context

1. Tested at file-based router only, so the same behavior might be excepted for code-based
2. Did not test any affections for not sibling routes (e.g. if error in $invoces-id.tsx affects members.tsx or another dynamic route e.g. $member-id.tsx)

The video I've made is a bigger size than allowed, so please download it from google drive. Also the sample was shot based on in docs documentation with actual version on that day.

[schiller-manuel]

can you find out which version introduced this issue? and can you please share a minimal example on e.g. stackblitz.com?

[eLeontev]

sure updated description p.s. link to the sandbox: https://stackblitz.com/edit/tanstack-router-bsa23m?file=src%2Froutes%2Fdashboard.invoices.%24invoiceId.tsx

[olzhas-kalikhan]

Version 1.15.6 introduced this bug but I think version before it, ErrorComponent didn't display correctly at all

[schiller-manuel]

I can't reproduce this behavior anymore in 1.19.13:

https://stackblitz.com/edit/tanstack-router-19d3y3?file=package.json

[eLeontev]

@schiller-manuel thank you for the update, is it possible to link it to any related fix?

[schiller-manuel]

probably https://github.com/TanStack/router/commit/3b559fc931823540ff7b55d16a5e48f78879f6ae