A `<noscript>` with an element inside fails hydration and replaces the server DOM
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 48/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- next.js, react, typescript
- 领域
- frontend
调研方向
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.
由索引模型根据 Issue 内容生成。
描述
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.
- 主要语言
- TypeScript
- 星标
- 537
- 派生
- 22
- 平均合并
- 11 小时 28 分钟
- 30 天内合并 PR
- 34
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
TanStack/redact 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 84/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 85/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 55/100
维护者通常 1 天内回复
-
难度 3/5 1-2 天 新手友好度 68/100
维护者通常 1 天内回复
相似的 Issue
-
test: claim-conflict drop leaves both facts active and is never re-proposed (untested review cell)未关闭
难度 2/5 1-3 小时 新手友好度 83/100
维护者通常 1 天内回复
-
[Feature]: Usage page should show API-equivalent cost and say when a connected plan shows info only未关闭enhancement from-x
难度 2/5 1-3 小时 新手友好度 66/100
nightly-labs/openbot#4867 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 72/100
egonSchiele/agency-lang#1377 ·
维护者通常 1 天内回复
-
normalizePath removes the Windows device namespace prefix可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭
难度 2/5 1-3 小时 新手友好度 76/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 68/100
caprover/caprover-frontend#273 ·
维护者通常 1 天内回复