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

[josepdaniel]

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!

#455

@zombieJ

[josepdaniel]

Here are some downstream issues we've found on GH which appear relevant

• Remix V2 Application error when installing antD ant-design/ant-design#51108
• Throw TypeError: Cannot read properties of null (reading 'firstChild') when use with Remix ant-design/ant-design#47095
• drawer Cannot read properties of undefined (reading 'children') ant-design/ant-design#38352