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 'ownerDocument') in getComputedStyle when canvas is detached during a pending debounced resize

Abierto
  • ¿Algo no está bien?
#12,312 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@Yahiro025 ya está trabajando en esto.

Desde el 18/9/2026.

  • #1 de @Yahiro025 — abierto
  • #12314 de @Yahiro025 — abierto

Evaluación

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

Línea de trabajo

Start in helpers.dom.ts and platform.dom.js, tracing getComputedStyle and getMaximumSize through Chart._resize and the debounced resize callback. Compare the proposed guards with the approach from #11809 and check the related getContainerSize and getRelativePosition paths. Done means a detached canvas during pending resize or teardown no longer throws the reported ownerDocument error.

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

Descripción

Description

getStyle/getComputedStyle in helpers.dom.ts (called via getMaximumSize → DomPlatform.getMaximumSize) assumes the canvas element passed to it is never null. When a chart's canvas has already been removed from the DOM but resize()/update() still fires afterward, this throws:

TypeError: Cannot read properties of null (reading 'ownerDocument')

Stack (minified names resolved from source):

getComputedStyle (helpers.dom.ts)
  → getMaximumSize (helpers.dom.ts)
  → DomPlatform.getMaximumSize (platform.dom.js)
  → Chart._resize
  → Chart.detached
  → bindResponsiveEvents
  → bindEvents
  → _checkEventBindings
  → Chart.update
  → this._doResize (debounced resize callback)

Reproduction path

We hit this in a React app (via react-chartjs-2) using resizeDelay (a debounced resize). Sequence:

  1. Chart mounts; the constructor's resize path schedules a debounced _doResize because resizeDelay > 0.
  2. Before that debounce timer fires, the component unmounts and React removes the canvas from the DOM (destroy() runs, but the pending timer isn't always guaranteed to lose its race depending on framework/container teardown order).
  3. The debounced callback fires anyway, update() → _doResize → detached() → bindResponsiveEvents() → platform.getMaximumSize(canvas, ...) → getComputedStyle(canvas), and canvas is null/detached at this point → element.ownerDocument throws.

Prior art

This is the same failure #11809 (https://github.com/chartjs/Chart.js/pull/11809) fixed, reported against chart.js 4.4.3. That PR was closed without merging — not because the approach was rejected outright (a maintainer only commented the "return semi-default values" approach felt a bit hacky and asked whether the repro could be narrowed to the container-removal case), but because the author's team moved away from Chart.js before the discussion concluded. The underlying bug was never fixed.

We independently reproduced the identical stack trace and error message against the current latest release, chart.js 4.5.1, confirming it is still present.

Our workaround

We removed our own use of resizeDelay entirely, since a debounced resize is what creates the race between "component removed" and "debounced resize still pending." That avoids the crash for us, but the underlying null-check gap in getComputedStyle/getMaximumSize (and the related spots #11809 touched: getRelativePosition, getContainerSize) remains for anyone else hitting a similar teardown race through a different path (e.g. responsive: true without resizeDelay, combined with fast unmounts during an in-flight ResizeObserver callback).

Suggested fix

Re-open/revive the approach from #11809: guard getComputedStyle/getMaximumSize/getContainerSize/getRelativePosition against a missing canvas (optional chaining + sensible defaults), as that PR's diff already implements.

Environment

  • Chart.js: 4.5.1
  • Browser: reproduced in Chromium (Playwright) and in production (real user reports, Chrome/Edge on Windows)
Lenguaje dominante
JavaScript
Estrellas
67.8k
Forks
12k
Merge medio
1 d 12 h
PR fusionados (30 d)
5

Preparar el entorno

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

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 chartjs/Chart.js

Todos los issues de chartjs/Chart.js

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.