A `<noscript>` with an element inside fails hydration and replaces the server DOM

Abierto
  • ¿Algo no está bien?
#141 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
48/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
next.js, react, typescript
Área
frontend

Línea de trabajo

Start with the reproduction in app/noscript/page.jsx and compare production behavior with and without withRedact using the reported Next.js and React versions. Check related issue #43, whose unmerged change may cover this case and conflicts with main. Done means the noscript example hydrates without a page error and keeps the server-rendered DOM.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Version: @tanstack/redact 0.2.6 via withRedact, Next.js 16.4.3 (App Router, Turbopack, production), react/react-dom 19.3.1, Chromium.

What happens

A <noscript> that contains an element, such as Google Tag Manager's <noscript><iframe …></noscript>, makes Redact report Hydration mismatch. and replace the server-rendered DOM. React 19.3.1 hydrates the same page with no errors and keeps the server nodes.

Repro

// app/noscript/page.jsx
export default function Page() {
  return (
    <main>
      <p id="content">Page content</p>
      <noscript>
        <iframe src="about:blank" height="0" width="0" style={{ display: 'none' }} title="No script" />
      </noscript>
    </main>
  )
}

next build && next start, then load /noscript, with and without withRedact:

React 19.3.1 Redact 0.2.6
Server <p id="content"> kept yes no, replaced
pageerror none Hydration mismatch.

Impact

GTM's snippet sits at the end of the root layout's <body>, so every page fails hydration and the whole document is rebuilt, including the <head> (about 120 elements in our app).

Where

With scripting enabled, the browser parses a <noscript>'s content as text, so the server's <iframe> never exists as an element. React treats noscript as a text-content element and doesn't hydrate its children. Redact appears to hydrate them as elements and finds only text.

Passing the same content as markup hydrates cleanly, and works as a workaround for now:

<noscript dangerouslySetInnerHTML={{ __html: '<iframe src="…" height="0" width="0" style="display:none" title="…"></iframe>' }} />

Related: #43 includes a change that keeps <noscript> content opaque during hydration, which may cover this. It hasn't landed yet and currently conflicts with main.

Lenguaje dominante
TypeScript
Estrellas
537
Forks
22
Merge medio
11 h 28 min
PR fusionados (30 d)
34

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/redact

Todos los issues de TanStack/redact

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.