`notFoundComponent` doesn't render when `notFound` is thrown in the loader since 1.28.2

[GuillaumeLaroucheUQAT]

Describe the bug

A route wrapped in Suspense either by setting the prop wrapInSuspense to true or defining a pendingComponent doesn't render the notFoundComponent or the defaultNotFoundComopnent when the notFound function is thrown in the loader.

Your Example Website or App

https://codesandbox.io/p/devbox/beautiful-archimedes-7vwmwj

Steps to Reproduce the Bug or Issue

To reproduce :

1. Go to index route
2. Loading is rendered instead of Not found

Things that doesn't trigger the bug :

• There is no Promise in the loader or the Promise is faster
• The prop wrapInSuspense is set to false
• The prop pendingComponent is not set

Expected behavior

The prop notFoundComponent should be rendered when the notFound function is thrown in the loader even if the route is wrapped in Suspense and the Promise is taking longer to resolve.

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Version: 124

Additional context

No response

[kcoet]

router.hasNotFoundMatch() also always returns false, I think this is related.

[ColoredCarrot]

Also ran into this today. This seems to be an intermittent issue; roughly 10% of the time, the notFound component is shown correctly. Maybe there's a race somewhere? Maybe useful: When the bug appears, the router devtools show that the route's loaderPromise is pending.

[GuillaumeLaroucheUQAT]

Personally, I encounter the issue 100% of the time. I also noticed that the route's loaderPromise stay stuck to pending when the bug happen.

[melv-n]

Seems I encountered similar behaviour in

• #1795

[GregoryCollett]

The same undesired behaviour seems to occur from the beforeLoad function aswell. docs seem to suggest it's possible to throw this here although I could be wrong...

[melv-n]

Yes I think it's a bug. The docs explicitly state:

You, the developer must throw a not-found error when a resource cannot be found. This can be done in beforeLoad, loader, or components using the notFound utility.

https://tanstack.com/router/latest/docs/framework/react/guide/not-found-errors