The content/children script tags of the head (`scripts[].children`) are lost from the HTML after hydration
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 15.1k
- Forks
- 1.9k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 143
Description
Which project does this relate to?
Router
Describe the bug
export const Route = createFileRoute('/test')({
component: RouteComponent,
head: () => ({
scripts: [
{
async: true,
src: `https://www.googletagmanager.com/gtag/js?id=ID`,
},
{
// this is missing on hydrated HTML
children: `window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'ID');`,
},
],
}),
});
Children code in scripts (<script>window.dataLayer...</script>) disappears after hydration on first page visit, reappears if navigating first to another page.
Your Example Website or App
https://stackblitz.com/edit/github-zpekad3w-lxs8xvjn?file=src%2Froutes%2Ftest%2Froute.tsx
Steps to Reproduce the Bug or Issue
- Build the attached StackBlitz site (
npm run build) node .output/server/index.mjs- navigate to the test page
- Refresh the page and check the HTML element in the console
<script>window.dataLayer...</script>is missing.
Expected behavior
<script>window.dataLayer...</script> should not disappear after hydration
Screenshots or Videos
https://github.com/user-attachments/assets/badce2ce-7cb9-4ab0-a749-844ecb48fa8c
Platform
- Router / Start Version: 1.168.10 / 1.167.16
- OS: Windows (WSL 2)
- Browser: Chrome
- Browser Version: 146.0.7680.178
- Bundler: vite
- Bundler Version: 8.0.3
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the attached StackBlitz reproduction and src/routes/test/route.tsx, then run npm run build and node .output/server/index.mjs. Reproduce the refresh on the test page and inspect the script element before and after hydration in Chrome. Done means the scripts[].children content remains present in the hydrated HTML on the first visit.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- full-stack
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100