Error with charts rerender

[NeroMorto]

Hello,
I have found an error, but I cannot reproduce it on a clean setup and confirm it.

I have a page with a selector that lets us switch between chart groups.
In our environment, we tried to use React component <CanvasJSChart/>. First page load with default group of charts was fine, everything rendered and worked.
But when we want to switch groups (by selector), the whole page is gonna die)

In a browser console, we can see the following error trace:

`canvasjs.min.js?8a4f:139 Uncaught ReferenceError: i is not defined
at r.destroy (canvasjs.min.js?8a4f:139)
at CanvasJSChart.componentWillUnmount (canvasjs.react.js?7bd8:32)
at callComponentWillUnmountWithTimer (react-dom.development.js?cada:14602)
at HTMLUnknownElement.callCallback (react-dom.development.js?cada:145)
at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:195)
at invokeGuardedCallback (react-dom.development.js?cada:248)
at safelyCallComponentWillUnmount (react-dom.development.js?cada:14609)
at commitUnmount (react-dom.development.js?cada:14841)
at commitNestedUnmounts (react-dom.development.js?cada:14872)
at unmountHostComponents (react-dom.development.js?cada:15129)
r.destroy @ canvasjs.min.js?8a4f:139
componentWillUnmount @ canvasjs.react.js?7bd8:32
callComponentWillUnmountWithTimer @ react-dom.development.js?cada:14602
callCallback @ react-dom.development.js?cada:145
invokeGuardedCallbackDev @ react-dom.development.js?cada:195
invokeGuardedCallback @ react-dom.development.js?cada:248
safelyCallComponentWillUnmount @ react-dom.development.js?cada:14609
commitUnmount @ react-dom.development.js?cada:14841
commitNestedUnmounts @ react-dom.development.js?cada:14872
unmountHostComponents @ react-dom.development.js?cada:15129
commitDeletion @ react-dom.development.js?cada:15181
commitAllHostEffects @ react-dom.development.js?cada:15852
callCallback @ react-dom.development.js?cada:145
invokeGuardedCallbackDev @ react-dom.development.js?cada:195
invokeGuardedCallback @ react-dom.development.js?cada:248
commitRoot @ react-dom.development.js?cada:16040
completeRoot @ react-dom.development.js?cada:17463
performWorkOnRoot @ react-dom.development.js?cada:17391
performWork @ react-dom.development.js?cada:17295
performSyncWork @ react-dom.development.js?cada:17267
interactiveUpdates$1 @ react-dom.development.js?cada:17558
interactiveUpdates @ react-dom.development.js?cada:2208
dispatchInteractiveEvent @ react-dom.development.js?cada:4913

I replaced minified version of CanvasJs with unuglyfied “source” version in the React component, and tried to debug it a little bit)
So the problem appears in <strong>Chart.prototype.destroy</strong> method at loop over eventhandlers
for (i = 0; i < allDOMEventHandlers.length; i++) {

if I add var/let before ‘i’ – everything works fine.

Is this a bug or is it just an incorrect usage of CanvasJs React component?

In clean setup by ‘react-create-app’ I cannot reproduce the same error and easily can console.log(i), but in my environment it is broken.

In both cases I used same packages:
“react”: “^16.5.2”,
“react-dom”: “^16.5.2”,
and CanvasJs 2.2.0

Let me know if you need more information.

• This topic was modified 6 years, 1 month ago by NeroMorto. Reason: Wrong thread

[Priyanka M S]

@neromorto,

Thanks for reporting. We will look into it and will get back to you at the earliest.

__
Priyanka M S
Team CanvasJS

[NeroMorto]

@priyanka,
Hello there! Do you have some news?)

[Indranil]

@neromorto,

We will fix this issue in our next release. For time being please declare the variable i within the for loop as shown here ( var i = 0; i < allDOMEventHandlers.length; i++ ).

Please refer to this forum post for more information.

___________
Indranil Deo,
Team CanvasJS