You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When with Tanstack/start I have a layout of this type:
posts.$postId.tsx
posts.route.tsx
with a loader in each of the files.
Where in posts.$postId.tsx the loader throw notFound() and the loader for the layout posts.route.tsx is not resolved, the layout get rendered in any case, but with Route.useLoaderData() being undefined.
If I go to a posts/postId URL that doesn't exists from a previous state where the Layout was properly rendered, there is no error because the layout loader is not being rerunned.
When I go to a page that throw notFound from a previous state where the layout was not rendered, the error appear.
The most simple way to make this error appear starting from start-basic:
Introduce a sufficiently large artificial delay in the Layout Loader (for example posts.$postId.tsx)
Manually go to an URL for a resource that doesn't exists (like /posts/i-do-not-exist)
During my tests I tried to introduce the delay inside the Layout Loader directly and inside the fetchPosts() Server Function, with the same result.
Navigate manually to a Post page that doesn't exist like /posts/i-do-not-exist
Expected behavior
As a user I expect that I see the notFoundComponent for the route that raised the notFound, with the posts.route.tsx still working.
Screenshots or Videos
Platform
OS: Linux
Browser: Same on Brave and Firefox
Version: Brave Version 1.76.82 Chromium: 134.0.6998.178 and Firefox 136
Additional context
As delay I have used a traditional await new Promise((resolve) => setTimeout(resolve, 500)); with various values of the timers. In my tests for the start-basic template a value greater than 300 started to make the error appear sometimes, with greater then 500 making it appear always.
The text was updated successfully, but these errors were encountered:
eisterman
changed the title
notFound cause hydration error with some route layout
notFound in page cause layout loader to not properly finish, returning undefined
Apr 3, 2025
eisterman
changed the title
notFound in page cause layout loader to not properly finish, returning undefined
notFound in page loader cause layout loader to not properly finish, returning undefined
Apr 3, 2025
Which project does this relate to?
Start
Describe the bug
When with Tanstack/start I have a layout of this type:
with a loader in each of the files.
Where in
posts.$postId.tsx
the loader thrownotFound()
and the loader for the layoutposts.route.tsx
is not resolved, the layout get rendered in any case, but withRoute.useLoaderData()
beingundefined
.If I go to a
posts/postId
URL that doesn't exists from a previous state where the Layout was properly rendered, there is no error because the layout loader is not being rerunned.When I go to a page that throw
notFound
from a previous state where the layout was not rendered, the error appear.The most simple way to make this error appear starting from
start-basic
:posts.$postId.tsx
)/posts/i-do-not-exist
)During my tests I tried to introduce the delay inside the Layout Loader directly and inside the
fetchPosts()
Server Function, with the same result.Your Example Website or App
https://github.com/eisterman/tanstack-notfound-bug
Steps to Reproduce the Bug or Issue
/posts/i-do-not-exist
Expected behavior
As a user I expect that I see the notFoundComponent for the route that raised the
notFound
, with theposts.route.tsx
still working.Screenshots or Videos
Platform
Additional context
As delay I have used a traditional
await new Promise((resolve) => setTimeout(resolve, 500));
with various values of the timers. In my tests for the start-basic template a value greater than 300 started to make the error appear sometimes, with greater then 500 making it appear always.The text was updated successfully, but these errors were encountered: