TanStack Router's notFoundComponent not showing when manually throwing notFound()

[gabcomby]

Discussed in #3320

^{Originally posted by gabcomby February 3, 2025}
I have the following route setup for the main page of my website:

export const Route = createFileRoute("/")({
  component: HomePage,
  beforeLoad: async () => {
    try {
      const missionState = await getMissionState();
      return { missionState };
    } catch (error) {
      console.error("Couldn't fetch mission state from server", error);
      throw notFound();
    }
  },
  loader: async ({ context: { missionState } }) => {
    if (missionState === MissionStateEnum.NOT_STARTED) {
      return {
        id: undefined,
        state: missionState,
        start_epoch_ms: undefined,
        robots_id: undefined,
      } as Mission;
    }
    const res = await getCurrentMission();
    console.log(res);
    return res;
  },
  notFoundComponent: NotLoadedStatePage,
});

I'm loading the state from the server to know if a mission is ongoing or not. However, when I can't reach the server, I want to show a screen which says the server can't be reached. It's the NotLoadedStatePage component:

const NotLoadedStatePage = () => {
  console.log("NotLoadedStatePage");
  return (
    <div className="flex flex-col h-full items-center justify-between m-5">
      <PageMainHeader title={websiteText.serverError} />
      <div className="text-2xl font-semibold text-primary">
        Couldn't fetch mission state from server, please check the server's
        status or try again later.
      </div>
      <SignatureText />
    </div>
  );
};

For some reason though, when navigating to this page with the server turned off, it instead redirects me to the basic default notFoundComponent page, and I get the following message in my console:

Warning: A notFoundError was encountered on the route with ID "__root__", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<div>Not Found<div>)

How can I fix this, and render the correct component?

[longzheng]

I think it's related to this issue #2139 where notFound and beforeLoad doesn't work and will always render the default/root notFoundComponent.

I also documented a potential workaround with a custom error #2139 (comment) but ideally it would be supported natively.