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

Aperta
  • Qualcosa non va?
#141 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
next.js, react, typescript
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
537
Fork
22
Merge medio
11h 28m
PR unite (30g)
34

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/redact

Tutte le issue di TanStack/redact

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.