From 58d8547c04d64f2758d583deef8ba02e2d64ba4f Mon Sep 17 00:00:00 2001
From: jon <nikuscs@gmail.com>
Date: Fri, 13 Feb 2026 23:53:51 +0000
Subject: [PATCH 1/2] fix: preserve data script content during client hydration

The Script component renders all <script> tags with empty content on
the client side, then uses useEffect to recreate them via DOM
manipulation. While necessary for executable scripts (they need
document.createElement to trigger execution), this causes data-only
scripts like application/ld+json to briefly flash empty during
hydration.

Per the HTML spec, any script with a type that isn't a JavaScript MIME
type or "module" is a "data block" that the browser never executes.
These can safely render their content directly via innerHTML on both
server and client, just like <style> tags already do in the same file.

Changes across react-router, solid-router, and vue-router:
- Detect non-executable script types via the type attribute
- Early-return in the client-side effect for data scripts
- Render data script content directly instead of emptying it
---
 packages/react-router/src/Asset.tsx          |  19 +-
 packages/react-router/tests/Scripts.test.tsx | 352 +++++++++++++++++++
 packages/solid-router/src/Asset.tsx          |  11 +
 packages/vue-router/src/Asset.tsx            |  15 +
 4 files changed, 396 insertions(+), 1 deletion(-)

diff --git a/packages/react-router/src/Asset.tsx b/packages/react-router/src/Asset.tsx
index 7a81b87f173..b5d671456ad 100644
--- a/packages/react-router/src/Asset.tsx
+++ b/packages/react-router/src/Asset.tsx
@@ -49,8 +49,15 @@ function Script({
   children?: string
 }) {
   const router = useRouter()
+  const dataScript =
+    typeof attrs?.type === 'string' &&
+    attrs.type !== '' &&
+    attrs.type !== 'text/javascript' &&
+    attrs.type !== 'module'
 
   React.useEffect(() => {
+    if (dataScript) return
+
     if (attrs?.src) {
       const normSrc = (() => {
         try {
@@ -142,9 +149,19 @@ function Script({
     }
 
     return undefined
-  }, [attrs, children])
+  }, [attrs, children, dataScript])
 
   if (!(isServer ?? router.isServer)) {
+    if (dataScript && typeof children === 'string') {
+      return (
+        <script
+          {...attrs}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: children }}
+        />
+      )
+    }
+
     const { src, ...rest } = attrs || {}
     // render an empty script on the client just to avoid hydration errors
     return (
diff --git a/packages/react-router/tests/Scripts.test.tsx b/packages/react-router/tests/Scripts.test.tsx
index 315b3e528e5..cd3aa0b699b 100644
--- a/packages/react-router/tests/Scripts.test.tsx
+++ b/packages/react-router/tests/Scripts.test.tsx
@@ -221,3 +221,355 @@ describe('ssr HeadContent', () => {
     )
   })
 })
+
+describe('data script rendering', () => {
+  test('data script renders content on server (SSR)', async () => {
+    const jsonLd = JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'Article',
+      headline: 'Test Article',
+    })
+
+    const rootRoute = createRootRoute({
+      scripts: () => [
+        {
+          type: 'application/ld+json',
+          children: jsonLd,
+        },
+      ],
+      component: () => {
+        return (
+          <div>
+            <div data-testid="ssr-root">root</div>
+            <Outlet />
+            <Scripts />
+          </div>
+        )
+      },
+    })
+
+    const indexRoute = createRoute({
+      path: '/',
+      getParentRoute: () => rootRoute,
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory({
+        initialEntries: ['/'],
+      }),
+      routeTree: rootRoute.addChildren([indexRoute]),
+      isServer: true,
+    })
+
+    await router.load()
+
+    const html = ReactDOMServer.renderToString(
+      <RouterProvider router={router} />,
+    )
+
+    expect(html).toContain('application/ld+json')
+    expect(html).toContain(jsonLd)
+  })
+
+  test('data script preserves content on client', async () => {
+    const jsonLd = JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'WebSite',
+      name: 'Test',
+    })
+
+    const rootRoute = createRootRoute({
+      scripts: () => [
+        {
+          type: 'application/ld+json',
+          children: jsonLd,
+        },
+      ],
+      component: () => {
+        return (
+          <div>
+            <div data-testid="data-client-root">root</div>
+            <Outlet />
+            <Scripts />
+          </div>
+        )
+      },
+    })
+
+    const indexRoute = createRoute({
+      path: '/',
+      getParentRoute: () => rootRoute,
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory({
+        initialEntries: ['/'],
+      }),
+      routeTree: rootRoute.addChildren([indexRoute]),
+    })
+
+    await router.load()
+
+    const { container } = await act(() =>
+      render(<RouterProvider router={router} />),
+    )
+
+    const rootEl = container.querySelector('[data-testid="data-client-root"]')
+    expect(rootEl).not.toBeNull()
+
+    const scriptEl = container.querySelector(
+      'script[type="application/ld+json"]',
+    )
+    expect(scriptEl).not.toBeNull()
+    expect(scriptEl!.innerHTML).toBe(jsonLd)
+  })
+
+  test('executable script still renders empty on client', async () => {
+    const rootRoute = createRootRoute({
+      scripts: () => [
+        {
+          children: 'console.log("hello")',
+        },
+      ],
+      component: () => {
+        return (
+          <div>
+            <div data-testid="exec-root">root</div>
+            <Outlet />
+            <Scripts />
+          </div>
+        )
+      },
+    })
+
+    const indexRoute = createRoute({
+      path: '/',
+      getParentRoute: () => rootRoute,
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory({
+        initialEntries: ['/'],
+      }),
+      routeTree: rootRoute.addChildren([indexRoute]),
+    })
+
+    await router.load()
+
+    const { container } = await act(() =>
+      render(<RouterProvider router={router} />),
+    )
+
+    const rootEl = container.querySelector('[data-testid="exec-root"]')
+    expect(rootEl).not.toBeNull()
+
+    const scripts = container.querySelectorAll('script:not([type])')
+    const inlineScript = Array.from(scripts).find(
+      (s) => !s.hasAttribute('src'),
+    )
+    expect(inlineScript).not.toBeNull()
+    // Executable scripts should render empty (content applied via useEffect)
+    expect(inlineScript!.innerHTML).toBe('')
+  })
+
+  test('module script still renders empty on client', async () => {
+    const rootRoute = createRootRoute({
+      scripts: () => [
+        {
+          type: 'module',
+          children: 'import { foo } from "./foo.js"',
+        },
+      ],
+      component: () => {
+        return (
+          <div>
+            <div data-testid="module-root">root</div>
+            <Outlet />
+            <Scripts />
+          </div>
+        )
+      },
+    })
+
+    const indexRoute = createRoute({
+      path: '/',
+      getParentRoute: () => rootRoute,
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory({
+        initialEntries: ['/'],
+      }),
+      routeTree: rootRoute.addChildren([indexRoute]),
+    })
+
+    await router.load()
+
+    const { container } = await act(() =>
+      render(<RouterProvider router={router} />),
+    )
+
+    const rootEl = container.querySelector('[data-testid="module-root"]')
+    expect(rootEl).not.toBeNull()
+
+    const moduleScript = container.querySelector('script[type="module"]')
+    expect(moduleScript).not.toBeNull()
+    // Module scripts should render empty (content applied via useEffect)
+    expect(moduleScript!.innerHTML).toBe('')
+  })
+
+  test('application/json data script preserves content', async () => {
+    const jsonData = JSON.stringify({ config: { theme: 'dark' } })
+
+    const rootRoute = createRootRoute({
+      scripts: () => [
+        {
+          type: 'application/json',
+          children: jsonData,
+        },
+      ],
+      component: () => {
+        return (
+          <div>
+            <div data-testid="json-root">root</div>
+            <Outlet />
+            <Scripts />
+          </div>
+        )
+      },
+    })
+
+    const indexRoute = createRoute({
+      path: '/',
+      getParentRoute: () => rootRoute,
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory({
+        initialEntries: ['/'],
+      }),
+      routeTree: rootRoute.addChildren([indexRoute]),
+    })
+
+    await router.load()
+
+    const { container } = await act(() =>
+      render(<RouterProvider router={router} />),
+    )
+
+    const rootEl = container.querySelector('[data-testid="json-root"]')
+    expect(rootEl).not.toBeNull()
+
+    const scriptEl = container.querySelector(
+      'script[type="application/json"]',
+    )
+    expect(scriptEl).not.toBeNull()
+    expect(scriptEl!.innerHTML).toBe(jsonData)
+  })
+
+  test('data script does not duplicate into document.head', async () => {
+    const jsonLd = JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'Organization',
+      name: 'Test Org',
+    })
+
+    const rootRoute = createRootRoute({
+      scripts: () => [
+        {
+          type: 'application/ld+json',
+          children: jsonLd,
+        },
+      ],
+      component: () => {
+        return (
+          <div>
+            <div data-testid="dup-root">root</div>
+            <Outlet />
+            <Scripts />
+          </div>
+        )
+      },
+    })
+
+    const indexRoute = createRoute({
+      path: '/',
+      getParentRoute: () => rootRoute,
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory({
+        initialEntries: ['/'],
+      }),
+      routeTree: rootRoute.addChildren([indexRoute]),
+    })
+
+    await router.load()
+
+    const { container } = await act(() =>
+      render(<RouterProvider router={router} />),
+    )
+
+    const rootEl = container.querySelector('[data-testid="dup-root"]')
+    expect(rootEl).not.toBeNull()
+
+    // Data scripts should NOT be duplicated into document.head by useEffect
+    const headScripts = document.head.querySelectorAll(
+      'script[type="application/ld+json"]',
+    )
+    expect(headScripts.length).toBe(0)
+
+    // Should only exist once in the container
+    const containerScripts = container.querySelectorAll(
+      'script[type="application/ld+json"]',
+    )
+    expect(containerScripts.length).toBe(1)
+    expect(containerScripts[0]!.innerHTML).toBe(jsonLd)
+  })
+
+  test('empty string type is treated as executable, not data script', async () => {
+    const rootRoute = createRootRoute({
+      scripts: () => [
+        {
+          type: '',
+          children: 'console.log("empty type")',
+        },
+      ],
+      component: () => {
+        return (
+          <div>
+            <div data-testid="empty-type-root">root</div>
+            <Outlet />
+            <Scripts />
+          </div>
+        )
+      },
+    })
+
+    const indexRoute = createRoute({
+      path: '/',
+      getParentRoute: () => rootRoute,
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory({
+        initialEntries: ['/'],
+      }),
+      routeTree: rootRoute.addChildren([indexRoute]),
+    })
+
+    await router.load()
+
+    const { container } = await act(() =>
+      render(<RouterProvider router={router} />),
+    )
+
+    const rootEl = container.querySelector('[data-testid="empty-type-root"]')
+    expect(rootEl).not.toBeNull()
+
+    const scriptEl = container.querySelector('script[type=""]')
+    expect(scriptEl).not.toBeNull()
+    // Empty type = text/javascript per HTML spec, should render empty like executable scripts
+    expect(scriptEl!.innerHTML).toBe('')
+  })
+})
diff --git a/packages/solid-router/src/Asset.tsx b/packages/solid-router/src/Asset.tsx
index 3d89c2e1d31..b762e7bb78a 100644
--- a/packages/solid-router/src/Asset.tsx
+++ b/packages/solid-router/src/Asset.tsx
@@ -39,8 +39,15 @@ function Script({
   children?: string
 }): JSX.Element | null {
   const router = useRouter()
+  const dataScript =
+    typeof attrs?.type === 'string' &&
+    attrs.type !== '' &&
+    attrs.type !== 'text/javascript' &&
+    attrs.type !== 'module'
 
   onMount(() => {
+    if (dataScript) return
+
     if (attrs?.src) {
       const normSrc = (() => {
         try {
@@ -125,6 +132,10 @@ function Script({
   })
 
   if (!(isServer ?? router.isServer)) {
+    if (dataScript && typeof children === 'string') {
+      return <script {...attrs} innerHTML={children} />
+    }
+
     // render an empty script on the client just to avoid hydration errors
     return null
   }
diff --git a/packages/vue-router/src/Asset.tsx b/packages/vue-router/src/Asset.tsx
index 80f61398f93..128ffa8ad37 100644
--- a/packages/vue-router/src/Asset.tsx
+++ b/packages/vue-router/src/Asset.tsx
@@ -54,9 +54,16 @@ const Script = Vue.defineComponent({
   },
   setup(props) {
     const router = useRouter()
+    const dataScript =
+      typeof props.attrs?.type === 'string' &&
+      props.attrs.type !== '' &&
+      props.attrs.type !== 'text/javascript' &&
+      props.attrs.type !== 'module'
 
     if (!(isServer ?? router.isServer)) {
       Vue.onMounted(() => {
+        if (dataScript) return
+
         const attrs = props.attrs
         const children = props.children
 
@@ -132,6 +139,14 @@ const Script = Vue.defineComponent({
 
     return () => {
       if (!(isServer ?? router.isServer)) {
+        if (dataScript && typeof props.children === 'string') {
+          return Vue.h('script', {
+            ...props.attrs,
+            'data-allow-mismatch': true,
+            innerHTML: props.children,
+          })
+        }
+
         const { src: _src, ...rest } = props.attrs || {}
         return Vue.h('script', {
           ...rest,

From b7f68aff3218688b4fa07f29ab43aaf99f1728f2 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sat, 14 Feb 2026 00:47:18 +0000
Subject: [PATCH 2/2] ci: apply automated fixes

---
 packages/react-router/tests/Scripts.test.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/react-router/tests/Scripts.test.tsx b/packages/react-router/tests/Scripts.test.tsx
index cd3aa0b699b..1c92e4b2203 100644
--- a/packages/react-router/tests/Scripts.test.tsx
+++ b/packages/react-router/tests/Scripts.test.tsx
@@ -364,9 +364,7 @@ describe('data script rendering', () => {
     expect(rootEl).not.toBeNull()
 
     const scripts = container.querySelectorAll('script:not([type])')
-    const inlineScript = Array.from(scripts).find(
-      (s) => !s.hasAttribute('src'),
-    )
+    const inlineScript = Array.from(scripts).find((s) => !s.hasAttribute('src'))
     expect(inlineScript).not.toBeNull()
     // Executable scripts should render empty (content applied via useEffect)
     expect(inlineScript!.innerHTML).toBe('')
@@ -460,9 +458,7 @@ describe('data script rendering', () => {
     const rootEl = container.querySelector('[data-testid="json-root"]')
     expect(rootEl).not.toBeNull()
 
-    const scriptEl = container.querySelector(
-      'script[type="application/json"]',
-    )
+    const scriptEl = container.querySelector('script[type="application/json"]')
     expect(scriptEl).not.toBeNull()
     expect(scriptEl!.innerHTML).toBe(jsonData)
   })