TypeError: Cannot read properties of null (reading 'siteTitle') in meta function

[riobits]

I'm using React Router as a...

framework

Reproduction

1. Go to https://stackblitz.com/edit/github-rxhk6sn1?file=app%2Froot.tsx
2. Try to go in a route that doesn't exist.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 1.87 GB / 7.70 GB
  Binaries:
    Node: 22.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.8.0 - ~\AppData\Roaming\npm\pnpm.CMD
    bun: 1.2.4 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (132.0.2957.127)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @react-router/dev: ^7.2.0 => 7.3.0 
    @react-router/express: ^7.2.0 => 7.3.0 
    @react-router/node: ^7.2.0 => 7.3.0 
    react-router: ^7.2.0 => 7.3.0
    vite: ^5.4.11 => 5.4.14

Used Package Manager

pnpm

Expected Behavior

I expect any route that doesn't exist to redirect me to the home page.
That's my code:
app/routes/home.tsx:

import { Link } from 'react-router';
import type { Route } from './+types/home';

export function loader() {
  return { siteTitle: 'React Router' };
}

export function meta({ data }: Route.MetaArgs) {
  return [{ title: data.siteTitle }];
}

export default function Home() {
  return (
    <div className="text-center p-4">
      <a href="/something" className="text-blue-700">
        Click here to navigate to a nonexistent page
      </a>
      <p className="max-w-72 mt-2 mx-auto">
        I'm using the {'<a>'} element on purpose because the error only appears
        when the user enters the link manually or clicks on a link causing a
        full-page reload.
      </p>
    </div>
  );

That's my error boundary inside root.tsx:

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
  const navigate = useNavigate();
  const isRouteError = isRouteErrorResponse(error);

  useEffect(() => {
    if (isRouteError && error.status === 404) {
      navigate('/');
    }
  }, []);

  let message = 'Oops!';
  let details = 'An unexpected error occurred.';
  let stack: string | undefined;

  if (isRouteError) {
    details = error.statusText || details;
  } else if (import.meta.env.DEV && error && error instanceof Error) {
    details = error.message;
    stack = error.stack;
  }

  return (
    <main className="pt-16 p-4 container mx-auto">
      <h1>{message}</h1>
      <p>{details}</p>
      {stack && (
        <pre className="w-full p-4 overflow-x-auto">
          <code>{stack}</code>
        </pre>
      )}
    </main>
  );
}

Actual Behavior

I'm getting this error:

TypeError: Cannot read properties of null (reading 'siteTitle')
    at Module.meta (https://yqnimyzmnygithub-nl3w--5173--5a421e5b.local-credentialless.webcontainer.io/app/routes/home.tsx?import:8:17)
    at Meta (https://yqnimyzmnygithub-nl3w--5173--5a421e5b.local-credentialless.webcontainer.io/node_modules/.vite/deps/chunk-KAMMW474.js?v=cc8d863b:8332:72)
    at react-stack-bottom-frame (https://yqnimyzmnygithub-nl3w--5173--5a421e5b.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=92e97bab:16190:20)
    at renderWithHooks (https://yqnimyzmnygithub-nl3w--5173--5a421e5b.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=92e97bab:4304:24)
    at updateFunctionComponent (https://yqnimyzmnygithub-nl3w--5173--5a421e5b.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=92e97bab:5970:21)
    at beginWork (https://yqnimyzmnygithub-nl3w--5173--5a421e5b.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=92e97bab:7046:20)
    at runWithFiberInDEV (https://yqnimyzmnygithub-nl3w--5173--5a421e5b.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=92e97bab:724:18)
    at performUnitOfWork (https://yqnimyzmnygithub-nl3w--5173--5a421e5b.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=92e97bab:10829:98)
    at workLoopSync (https://yqnimyzmnygithub-nl3w--5173--5a421e5b.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=92e97bab:10690:43)
    at renderRootSync (https://yqnimyzmnygithub-nl3w--5173--5a421e5b.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=92e97bab:10673:13)

[nikolailehbrink]

This issue is likely caused by calling navigate() outside of a useEffect. I’ve seen a warning before that says navigate() should only be used inside useEffect and not directly during render or page load. That said, in this specific case—with the conditional—it works without throwing an error, so I used the following and it seems fine:

if (isRouteError && error.status === 404) {
  return navigate('/');
}

However, this might not be the correct or recommended approach. A better solution is outlined in this comment, which suggests creating a splat route with a redirect in the loader:

Create a splat route with routes/$.tsx, export a loader where you redirect to /

// routes/$.tsx
import { redirect } from 'react-router';

export function loader() {
  return redirect('/');
}

This is more aligned with how React Router expects things to work.

[riobits]

Thanks!