Issue with notFound() not rendering with CSS
I have a server action using createServerFn() that checks if an object exists, if it does not i throw a «throw notFound()» and on my page loader: I do a const item = await queryClient.ensureQueryData(query)
Etc.., and when it throws notFound i do not get any CSS…
How can I fix this?
3 Replies
xenial-blackOP•5d ago
What i want to do is to go from this:
if (!issue) {
throw new Error("Issue not found")
}
to this:
if (!issue) {
throw notFound()
}
And that the notFound on the client actually gets rendered with the CSS.
xenial-blackOP•5d ago
I see that we can throw a notFound() in a loader, but cant we do this on the server?
https://tanstack.com/router/v1/docs/framework/react/guide/not-found-errors
export const Route = createFileRoute('/posts/$postId')({
loader: async ({ params: { postId } }) => {
const post = await getPost(postId)
if (!post)
throw notFound({
// Forward some data to the notFoundComponent
// data: someIncompleteLoaderData
})
return { post }
},
//
data: unknown is passed to the component via the data option when calling notFound
notFoundComponent: ({ data }) => {
// ❌ useLoaderData is not valid here: const { post } = Route.useLoaderData()
// ✅:
const { postId } = Route.useParams()
const search = Route.useSearch()
const context = Route.useRouteContext()
return <p>Post with id {postId} not found!</p>
},
})Not Found Errors | TanStack Router React Docs
⚠️ This page covers the newer notFound function and notFoundComponent API for handling not found errors. The NotFoundRoute route is deprecated and will be removed in a future release. See for more inf...
stormy-gold•5d ago
can you please create a github issue including a complete minimal example?