Root loader not being called in CatchBoundary

What version of Remix are you using?

1.6.4

Steps to Reproduce

1. Export something from your root loader, and try to read the data returned by that loader in the CatchBoundary.

import { json, LoaderFunction } from "@remix-run/node"
import { useMatches } from "@remix-run/react"

import { getBaseURL } from "~/utils/seo"

export const loader: LoaderFunction = ({ request }) => {
  return json({ baseUrl: getBaseURL(request) })
}

const Root: React.FC = () => {
  console.log(JSON.stringify(useMatches(), null, 2))
  return <div>Root</div>
}

export const CatchBoundary = () => {
  console.log(JSON.stringify(useMatches(), null, 2))
  return <div>Catch</div>
}

export default Root

1. Navigate to a non-existing route.

Expected Behavior

This should be logged to the console (taken from an existing route).

[
  {
    "id": "root",
    "pathname": "/",
    "params": {},
    "data": {
      "baseUrl": "http://localhost:3000"
    }
  }
]

Actual Behavior

This was logged to the console (taken from a non-existing route).

[
  {
    "id": "root",
    "pathname": "",
    "params": {}
  }
]

[kevinwolfcr]

Update: I managed to hack around this by adding a Splat Route throwing a 404 error status code.

app/routes/$.tsx

import { notFound } from "remix-utils"

export function loader() {
  throw notFound(null)
}

export default function NotFound() {
  return null
}

[revelt]

This bug/feature has been since the beginning; in practice, for example, it means our 404 pages can’t show the correct theme. It would be nice if loaders were called in catch boundaries.