`notFoundComponent` cannot be rendered on prerendered routes
Which project does this relate to?
Start
Describe the bug
Currently, if you access a 404 page in a fully prerendered app, it will not render anything. I have deployed a static website on Cloudflare Pages, and there seemed to be no way to render a 404 in production.
On cloudflare pages, a 404.html in root will be used to render a not-found page.
https://developers.cloudflare.com/pages/configuration/serving-pages/#not-found-behavior
I have tried the following configuration to manually output a 404.html.
prerender: {
enabled: true,
autoSubfolderIndex: true,
crawlLinks: true,
},
pages: [
{
path: "/404",
prerender: { enabled: true, outputPath: "/404.html" },
},
],
If you access a non-existent page with JS disabled, you will see the 404 page, but with JS tanstack will hydrate with an empty page.
If you prerender a non-existent route with
{
path: "/this-route-doesnt-exist",
prerender: {enabled: true}
}
the build will fail (as expected), because you would want prerendering to fail if there was an error.
Maybe we should be able to configure in a way that we allow 404 to be prerendered?
Reproduction: URL: https://tanstack-start-404.pages.dev/a Actual 404 route: https://tanstack-start-404.pages.dev/404 (prerendered automatically from 404.tsx) GitHub: https://github.com/taroj1205/tanstack-start-5427-not-found-component
Your Example Website or App
https://github.com/taroj1205/tanstack-start-404
Steps to Reproduce the Bug or Issue
- Go to https://tanstack-start-404.pages.dev/a
- See empty page
Expected behavior
As a user, I expect a not found component or 404.html being rendered.
Screenshots or Videos
JS Disabled:
JS Enabled:
Platform
- Router / Start Version: 1.132.0
- OS: Windows 11 (WSL)
- Browser: Helium
- Browser Version: Version 0.4.12.1 (Official Build, Chromium 140.0.7339.207)
- Bundler: vite
- Bundler Version: 7.1.7
Additional context
Conversation on discord: https://discord.com/channels/719702312431386674/1238170697650405547/1425979592010760274
We've experienced what I think is a similar problem and have a proposed PR https://github.com/TanStack/router/pull/5686 incase its any use
We've merged #5686 - @taroj1205 , would you mind checking if this issue is resolved?
@birkskyum I've tried updating the version to 1.139.0, but the issue seem to persist commit: https://github.com/taroj1205/tanstack-start-5427-not-found-component/commit/283a2da4dd8e4e0c200e60fdfde5185ca1588345 404 link: https://724ae9cc.tanstack-start-404.pages.dev/a Please tell me if I'm doing something wrong.
@birkskyum I've tried updating the version to 1.139.0, but the issue seem to persist commit: taroj1205/tanstack-start-5427-not-found-component@283a2da 404 link: https://724ae9cc.tanstack-start-404.pages.dev/a Please tell me if I'm doing something wrong.
Are you throwing via Tanstack router's notFound error?
i.e.
import { notFound } from '@tanstack/react-router';
Examples: https://tanstack.com/router/latest/docs/framework/react/api/router/notFoundFunction#examples
The fix we added will only catch and process an error that returns true when passed to the isNotFound function.
@roduyemi ah that would be a different issue then. I am trying to render a not found page for the app for when accessing a nonexistent route.
@birkskyum I've tried updating the version to 1.139.0, but the issue seem to persist commit: taroj1205/tanstack-start-5427-not-found-component@283a2da 404 link: https://724ae9cc.tanstack-start-404.pages.dev/a Please tell me if I'm doing something wrong.
Are you throwing via Tanstack router's
notFounderror? i.e.import { notFound } from '@tanstack/react-router';Examples: https://tanstack.com/router/latest/docs/framework/react/api/router/notFoundFunction#examplesThe fix we added will only catch and process an error that returns true when passed to the
isNotFoundfunction.