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!