Cannot read properties of null (reading 'children') - dynamicCSS.ts
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 30/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- react, typescript
- 领域
- frontend
调研方向
先阅读 dynamicCSS.ts,重点关注 getContainer 和 findStyles,然后查看关联的 pull request 455。复现 issue 中描述的 SSR React hydration 场景,并验证在 document.head 和 document.body 不可用时进行渲染不再导致报告中的 null-children 错误。
由索引模型根据 Issue 内容生成。
描述
Hi there, thank you for authoring these utilities.
We have run into a persistent problem when hydrating server-side-rendered react using cssinjs-based components (eg antd-v5) due to the following calls in dynamicCSS.ts.
function findStyles(container: ContainerType) {
return Array.from(
(containerCache.get(container) || container).children,
).filter(node => node.tagName === 'STYLE') as HTMLStyleElement[];
}
Where container is usually fetched from
function getContainer(option: Options) {
if (option.attachTo) {
return option.attachTo;
}
const head = document.querySelector('head');
return head || document.body;
}
When hydrating an SSR react app, if there is a mismatch between the client-render and server-render then the client will re-render the component. For frameworks like remix, where the whole document is rendered, document.querySelector('head') and document.body may both be null at the time of rendering, leading to the following error
Uncaught TypeError: Cannot read properties of null (reading 'children')
I believe the following PR, which has already been open for quite some time, will address the bug. So we would like to request considering it for merge. Thank you in advance!
https://github.com/react-component/util/pull/455
@zombieJ
- 主要语言
- TypeScript
- 星标
- 670
- 派生
- 205
- 平均合并
- 15 天 17 小时
- 30 天内合并 PR
- 6
贡献指南
这个仓库没有索引到贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
react-component/util 的其他 Issue
-
难度 2/5 1-3 小时 新手友好度 88/100
react-component/util#816 ·
-
难度 2/5 1-3 小时 新手友好度 65/100
react-component/util#671 · 1 条评论 ·
-
难度 4/5 3-5 天 新手友好度 35/100
react-component/util#738 · 1 条评论 · 1 个 reaction ·
-
难度 4/5 3-5 天 新手友好度 25/100
react-component/util#710 ·
-
难度 3/5 1-2 天 新手友好度 25/100
react-component/util#647 · 5 条评论 ·
查看 react-component/util 的全部 Issue
相似的 Issue
-
blocklist removal
难度 2/5 1-3 小时 新手友好度 65/100
MetaMask/eth-phishing-detect#296544 ·
-
难度 2/5 1-3 小时 新手友好度 70/100
pastelsky/bundlephobia#1122 ·
-
难度 2/5 1-3 小时 新手友好度 70/100
-
category/development priority/P2 scope/file-operations scope/testing type/enhancement
难度 2/5 1-3 小时 新手友好度 75/100
-
难度 2/5 1-3 小时 新手友好度 75/100