Router: Inline scripts with children render empty placeholder during client-side navigation

[nikuscs]

Which project does this relate to?

Router

Describe the bug

When using inline scripts (with children instead of src) in the head() function, client-side SPA navigation renders empty <script>
tags as placeholders.

Possible cause:

On SPA navigation, empty <script type="application/ld+json"></script> tags appear in the DOM.
But the actual content is appended separately via useEffect, but the rendered placeholder remains empty.

I believe this is the piece of code

  if (!router.isServer) {
    const { src, ...rest } = attrs || {};
    return jsx("script", {
      suppressHydrationWarning: true,
      dangerouslySetInnerHTML: { __html: "" },
  client!
      ...rest
    });
  }

This works for external scripts (src), but inline scripts with children should either:

1. Render with the actual content: { __html: children }
2. Return null and rely solely on the useEffect DOM insertion

Your Example Website or App

https://stackblitz.com/edit/github-nzob1mi6?file=src%2Froutes%2F__root.tsx

Steps to Reproduce the Bug or Issue

export const Route = createFileRoute('/blog/$slug')({
    head: () => ({
      scripts: [
        {
          type: 'application/ld+json',
          children: JSON.stringify({ "@type": "Article", "headline":"Test" })
        },
      ],
    }),
  })

Expected behavior

Script tags should contain their children content or not render at all on the client.

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.140.0
• OS: macOS
• Browser: Chrome
• Browser Version: -
• Bundler: Vite
• Bundler Version: ^7.0.0

Additional context

No response

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and agent prompts for this issue.

• Create Plan

Examples

• Example 1
• Example 2

🔗 Related PRs

#5095 - fix(router): prevent script tag duplication in SSR and client-side navigation [merged]
#5686 - fix(router-core): Catch errors thrown during hydrate [merged]
#5895 - fix: script streaming [merged]
#5903 - fix(solid-start): fix hydration regression in 1.136.9 [merged]
#5980 - fix: fix hydration error by preservering script attrs [merged]

👤 Suggested Assignees

• schiller-manuel
• jamongsalguclub
• roduyemi
• birkskyum

---

🧪 Issue enrichment is currently in early access.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

[schiller-manuel]

why is the empty placeholder an issue really? does this cause any issues?

[nikuscs]

why is the empty placeholder an issue really? does this cause any issues?

Google could report invalid schemas due to being empty or unable to be parsed. It shouldnt pose a direct penalty. So its not that bad, but i think wroth having a look

edit: actually its not really that bad, because this happens on client side only, ssr always renders the tags correctly

[kcoet]

None of the methods worked for me, it caused a hydration error, the jsonld script was not visible in the HTML server response (before hydration), I think that's why Search Console reported invalid.

react-dom-client.development.js:5238 Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

https://react.dev/link/hydration-mismatch

  ...
    <Matches>
      <SafeFragment fallback={null}>
        <Transitioner>
        <MatchesInner>
          <CatchBoundary getResetKey={function getResetKey} errorComponent={function ErrorComponent} ...>
            <CatchBoundaryImpl getResetKey={function getResetKey} onCatch={function onCatch}>
              <MatchImpl matchId="__root__/">
                <RootDocument>
                  <html lang="id">
                    <head>
                      <HeadContent>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset>
                        <Asset tag="script" attrs={{type:"appl...", ...}} nonce={undefined}>
                          <Script attrs={{type:"appl...", ...}}>
+                           <script
+                             suppressHydrationWarning={true}
+                             dangerouslySetInnerHTML={{__html:"{\"@contex..."}}
+                             type="application/ld+json"
+                             nonce={undefined}
+                           >
-                           <style type="text/css">
                    ...

I've tried this:
The server responds correctly but the <script> content is removed during hydration.

scripts: [
  {
    type: 'application/ld+json',
    children: JSON.stringify(jsonld),
  },
]

and this:
server responds without <script>, but it is visible after hydration.

scripts: [
  {
    type: 'application/ld+json',
    dangerouslySetInnerHTML: {
      __html: JSON.stringify(jsonld),
    },
  },
]

Nothing works.