router icon indicating copy to clipboard operation
router copied to clipboard

`notFoundComponent` cannot be rendered on prerendered routes

Open taroj1205 opened this issue 3 months ago • 5 comments

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

  1. Go to https://tanstack-start-404.pages.dev/a
  2. See empty page

Expected behavior

As a user, I expect a not found component or 404.html being rendered.

Screenshots or Videos

JS Disabled:

Image

JS Enabled:

Image

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

taroj1205 avatar Oct 09 '25 23:10 taroj1205

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

matclayton avatar Nov 19 '25 15:11 matclayton

We've merged #5686 - @taroj1205 , would you mind checking if this issue is resolved?

birkskyum avatar Nov 19 '25 20:11 birkskyum

@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.

taroj1205 avatar Nov 27 '25 00:11 taroj1205

@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 avatar Nov 27 '25 11:11 roduyemi

@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 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.

taroj1205 avatar Nov 29 '25 02:11 taroj1205