ensure `getComputedStyle` always has a valid canvas provided
Expected behavior
getComputedStyle() from helpers.dom.js should be called with valid canvas values provided.
Current behavior
TypeError: Cannot read properties of null (reading 'ownerDocument')
at getComputedStyle(../../node_modules/chart.js/dist/chunks/helpers.segment.js:1841:47)
at getMaximumSize(../../node_modules/chart.js/dist/chunks/helpers.segment.js:1933:17)
at DomPlatform.getMaximumSize(../../node_modules/chart.js/dist/chart.js:3435:12)
at _a._resize(../../node_modules/chart.js/dist/chart.js:5700:35)
at detached(../../node_modules/chart.js/dist/chart.js:6267:12)
at _a.bindResponsiveEvents(../../node_modules/chart.js/dist/chart.js:6273:16)
at _a.bindEvents(../../node_modules/chart.js/dist/chart.js:6215:12)
at _a._checkEventBindings(../../node_modules/chart.js/dist/chart.js:5911:12)
at _a.update(../../node_modules/chart.js/dist/chart.js:5860:10)
at this._doResize(../../node_modules/chart.js/dist/chart.js:5628:46)
at sentryWrapped(../../node_modules/@sentry/browser/esm/helpers.js:36:17)
From sentry:
Reproducible sample
.
Optional extra steps/info to reproduce
No response
chart.js version
4.4.3
Browser name and version
Experienced on Chrome >=124.0.0 according to my project's Sentry, but probably impacts others since this is an issue with the provided parameter.
Link to your project
No response
@etimberg / @LeeLenaleee I used optional chaining and null coalescing because of this discussion - https://github.com/chartjs/Chart.js/pull/11651#issuecomment-1925881486, which is why the CI pipeline failed. Give the word and I'll remove the rule so this pipeline can pass.
@etimberg / @LeeLenaleee can you re-review this?
It feels kind of hacky to just return semi default values if the canvas does not exist.
Can you reproduce the errors because it seems to me that if you remove the parents and keep chart.js alive. But if you destroy the chart first these errors also should not happen
The canvas probably got unmounted as a result of React's rerendering (I was using Chartjs via https://github.com/reactchartjs/react-chartjs-2). Since we've hit enough issues with Chartjs in our react application, my team has decided to move away from chartjs.
Feel free to close or update this pull request as you see fit.