routeOptions.scripts loads in <head> if async: true

reacttypescript

Hi! I just wanted to confirm the following behavior was a bug before submitting a ticket but I am trying to add an async script to a route to run in the <body> according to the docs here

https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management#managing-body-scripts

i should do something like this in my file route

export const Route = createFileRoute("/(tenant)/$tenant/page/$name/")({
    ...// other stuff
    scripts: () => [
        {
            async: true,
            src: "https://js-cdn.music.apple.com/musickit/v3/musickit.js",
        },
    ],
    component: RouteComponent,
});

export const Route = createFileRoute("/(tenant)/$tenant/page/$name/")({
    ...// other stuff
    scripts: () => [
        {
            async: true,
            src: "https://js-cdn.music.apple.com/musickit/v3/musickit.js",
        },
    ],
    component: RouteComponent,
});

however I've noticed if I add the async attribute, it gets added to the <head> instead of the body, but if I put async === false it is added to the body.

Is this intended behavior or should both true/false be added to the body?...I thought it should be added to the body (see screenshots of the different behavior)

My __root looks something like this where ive added the

<Scripts />

<Scripts />

tag in the body

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
    return (
        <html lang="en">
            <head>
                <HeadContent />
            </head>
            <body className="bg-background-primary">
                <Scripts />
            </body>
        </html>
    );
}

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
    return (
        <html lang="en">
            <head>
                <HeadContent />
            </head>
            <body className="bg-background-primary">
                <Scripts />
            </body>
        </html>
    );
}

Screenshot_2026-01-20_at_10.23.57_AM.png

Screenshot_2026-01-20_at_10.23.30_AM.png

Document Head Management | TanStack Router React Docs

Document head management is the process of managing the head, title, meta, link, and script tags of a document and TanStack Router provides a robust way to manage the document head for full-stack appl...

TanStack•2mo ago•

2 replies

spotty-amber

routeOptions.scripts loads in <head> if async: true

reacttypescript

export const Route = createFileRoute("/(tenant)/$tenant/page/$name/")({
    ...// other stuff
    scripts: () => [
        {
            async: true,
            src: "https://js-cdn.music.apple.com/musickit/v3/musickit.js",
        },
    ],
    component: RouteComponent,
});

export const Route = createFileRoute("/(tenant)/$tenant/page/$name/")({
    ...// other stuff
    scripts: () => [
        {
            async: true,
            src: "https://js-cdn.music.apple.com/musickit/v3/musickit.js",
        },
    ],
    component: RouteComponent,
});

<Scripts />

<Scripts />

tag in the body

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
    return (
        <html lang="en">
            <head>
                <HeadContent />
            </head>
            <body className="bg-background-primary">
                <Scripts />
            </body>
        </html>
    );
}

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
    return (
        <html lang="en">
            <head>
                <HeadContent />
            </head>
            <body className="bg-background-primary">
                <Scripts />
            </body>
        </html>
    );
}

Document Head Management | TanStack Router React Docs

routeOptions.scripts loads in <head> if async: true

routeOptions.scripts loads in <head> if async: true

Similar Threads

Similar Threads

Similar Threads