Simple loader header example not working

[kentcb]

I'm using React Router as a...

framework

Reproduction

import type { Route } from "./+types/test";
import { data, type HeadersArgs } from "react-router";

export function loader({ params }: Route.LoaderArgs) {
    return data('something', {
        headers: {
            'Cache-Control': 'max-age=120',
        },
    });
}

export function headers({
    loaderHeaders,
}: HeadersArgs) {
    console.log(`Returning loaderHeaders: ${JSON.stringify(loaderHeaders)}`);
    return loaderHeaders;
}

export default function Component({
    loaderData,
}: Route.ComponentProps) {
    return (
        <div>
            testing: {loaderData}
        </div>
    );
}

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 24.96 GB / 63.92 GB
  Binaries:
    Node: 22.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 132.0.6834.196
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @react-router/dev: ^7.1.5 => 7.1.5
    @react-router/node: ^7.1.5 => 7.1.5
    @react-router/serve: ^7.1.5 => 7.1.5
    react-router: ^7.1.5 => 7.1.5
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

The Cache-Control header returned by loader should be passed into headers.

Actual Behavior

Output is:

Returning loaderHeaders: {}

No Cache-Control header is received by browser.

[GabenGar]

The headers in the HeadersArgs are of Headers type, not JSON-serializable objects. Well technically they are, but they all resolve to empty object for the purpose of JSON.

[timdorr]

Correct, this isn't a bug. If you change your console log to show the plain object, you'll see the headers:

console.log(`Returning loaderHeaders`, loaderHeaders)

Returning loaderHeaders Headers { 'Cache-Control': 'max-age=120' }