TanStack Start and React 19 Metadata Tags

[SoloReverse]

Which project does this relate to?

Start

Describe the bug

The issue is simple. I am attempting to use React 19's metadata tags to manage my metadata, but each components is being rendered twice on the DOM, even after adding a key to it. This is in Development and Production.

I am sure this is SSR issue. Also If someone someone has a solution to dynamically render head meta elements using the router directly that would be great, (I would like the loader context to fetch the updated context not the initial state). My current solution is straight up DOM manipulation.

Your Example Website or App

edit: tanstack-react19 Repo

Steps to Reproduce the Bug or Issue

Use any tag inside a react component.

Expected behavior

Rendering a single tag in the head

Screenshots or Videos

No response

Platform

• OS: macOS / iOS
• Browser: Chrome and Safari

Additional context

No response

[SoloReverse]

Commenting this line out from
start/client/Meta.tsx

    <>
      {meta.map((asset, i) => (
        <Asset {...asset} key={`tsr-meta-${JSON.stringify(asset)}`} />
      ))}
      <>

Seems to fix the problem, however. I don't know why and why is it getting the meta tag from react as opposed to the router.

[SoloReverse]

Also this weirdly enough resolved an issue where a ternary wasn't being evaluated properly on the client after hydration.

The client would render the dark mode image due to an undefined context value on the server, but later would result in a value on the client that goes ignored, not changing the image to align with the theme. This fixed that issue, but results in a horrible first paint. that flashes unstyled content which I guess is expected if Asset.tsx renders link tags as well.

[schiller-manuel]

can you please provide a complete minimal example? do you render the Meta component from start ?

[SoloReverse]

can you please provide a complete minimal example? do you render the Meta component from start ?

Here's the codebase I am working with atm.
https://github.com/SoloReverse/tanstack-react19

edit: and No I am rendering the meta component in the header component using react 19's tag. Tags rendered by the createRootRoute are not affected.

[schiller-manuel]

but you are rendering the <Meta> component in the root route. this does not work well (as you discovered ) with some <meta> rendered elsewhere.
we need to see if it is possible to allow both.

the obvious solution right now is not using <meta> but to provide the meta information via the route definition.

alternatively, don't use <Meta>

[SoloReverse]

Removing the <Meta/> just stops the whole app from rendering, I think in start its responsible for a lot of stuff. Its's fine for now, but I think support for React's 19 own <meta/> is necessary in the future.

[SeanCassiere]

This needs investigation into how React 19 moves elements into the head and how Start performs deduping and the removal of stale tags.