Cannot read properties of null (reading 'children') - dynamicCSS.ts
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 30/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react, typescript
- Domain
- frontend
Research direction
Start by reading dynamicCSS.ts, focusing on getContainer and findStyles, then review the linked pull request 455. Reproduce the SSR React hydration scenario described in the issue and verify that rendering when document.head and document.body are unavailable no longer causes the reported null-children error.
Written by the indexing model from the issue text.
Description
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
- Dominant language
- TypeScript
- Stars
- 670
- Forks
- 205
- Avg merge
- 15d 17h
- Merged PRs (30d)
- 6
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react-component/util
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
react-component/util#816 ·
-
injectCSS method not attaching csp nonce passed to it. it is used in antd components internally Open
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
react-component/util#671 · 1 comment ·
-
Difficulty 4/5 3-5 days Newbie friendliness 35/100
react-component/util#738 · 1 comment · 1 reaction ·
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
react-component/util#710 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 25/100
react-component/util#647 · 5 comments ·
All issues in react-component/util
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
bug v2
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
modelcontextprotocol/inspector#2458 · 1 comment ·
-
Difficulty 1/5 Under an hour Newbie friendliness 75/100
railmapgen/rmp-gallery#4068 ·
-
Mend: dependency security vulnerability status: needs triage 🕵️♀️
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
carbon-design-system/ibm-products#9907 ·