Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

Cannot read properties of null (reading 'children') - dynamicCSS.ts

已关闭
#603 6 条评论 7 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 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

贡献指南

这个仓库没有索引到贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

react-component/util 的其他 Issue

查看 react-component/util 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。