Router: Inline scripts with children render empty placeholder during client-side navigation #6062
Description
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:
- Render with the actual content: { __html: children }
- 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