How to return notFound() from a loader

[lo1tuma]

According to the documentation notFound() can be returned or thrown:

The notFound function returns a new NotFoundError object that can be either returned or thrown from places like a Route's beforeLoad or loader callbacks to trigger the notFoundComponent.

Since the return value of notFound() is not an instance of Error my ESLint setup is complaining about throwing it. That’s why I thought I could try the alternative of returning it. Unfortunately this changes also the return type of useLoaderData(), which is suddenly a union type of NotFoundError | MyLoadedData. Shouldn’t this type beeing removed automatically, because the router is already taking care of the not-found scenario and my component shouldn’t even get rendered so useLoaderData() won’t be executed?.

[RobinDaugherty]

I've opened #2248 to improve this.

In the meantime, you can set the types in your project. Place this in a .d.ts file inside of your project where Typescript will see it, for example tanstack-react-router.d.ts:

import '@tanstack/react-router'

declare module '@tanstack/react-router' {
  // https://github.com/TanStack/router/pull/2248
  export function notFound(options: { throw: true }): never
  export function notFound(options: { throw?: false }): NotFoundError
}

As an alternative, you can wrap it in a local implementation

import { notFound } from '@tanstack/react-router'

export default function throwNotFound(): never {
  notFound({ throw: true })

  // notFound will always throw, so this line will never be reached,
  // but TypeScript doesn't know that, so we need to throw here to make it happy
  throw new Error('notFound() did not throw')
}

[lo1tuma]

Thanks. I appreciate the effort. Ideally I would like to have the return-approach working correctly because using throw to execute effects feels like a code smell.

As another workaround to not run into issues detected by @typescript-eslint/only-throw-error I’ve also considered to implement my own Error subclass which exposes the isNotFound property and throw that instead of using the notFound() function.