Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Cerrado
#603 6 comentarios 7 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
30/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Empieza leyendo dynamicCSS.ts, centrándote en getContainer y findStyles; después, revisa el pull request enlazado 455. Reproduce el escenario de hidratación de SSR React descrito en el issue y verifica que renderizar cuando document.head y document.body no están disponibles ya no provoque el error null-children indicado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
670
Forks
205
Merge medio
15 d 17 h
PR fusionados (30 d)
6

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react-component/util

Todos los issues de react-component/util

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.