When i use CoreUI ChartBar,
data={{
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'GitHub Commits',
data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
},
],
}} type={'bar'} />
I am getting an error. ** chart.esm.js:5354
Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.
at new Chart (chart.esm.js:5354:1)
at renderChart (CChart.tsx:160:1)
at CChart.tsx:242:1
at commitHookEffectListMount (react-dom.development.js:23049:1)
at invokePassiveEffectMountInDEV (react-dom.development.js:25044:1)
at invokeEffectsInDev (react-dom.development.js:27304:1)
at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27283:1)
at flushPassiveEffectsImpl (react-dom.development.js:27007:1)
at flushPassiveEffects (react-dom.development.js:26935:1)
at commitRootImpl (react-dom.development.js:26886:1)
**
There are no changes to the code.
It looks like core-ui is using react-chartjs-2 under the hood. It's a known issue, but I'm having trouble reproducing the error. Please check out this thread in react-chartjs-2' issues. Specifically MartinP-C's comment.
If you could provide a reproduction that would be greatly appreciated.
I was getting this error (again with React 18.0.1, in Strict Mode) Removing Strict Mode stops the error (because Strict Mode double-invokes lifecycle functions when in dev mode? Hence re-use of canvas? https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)
However! Strict Mode wasn't the problem itself. I had not registered a Chart.JS component and the error being thrown ('"arc" is not a registered element') must have caused React to double-invoke and try to re-use the canvas.
Fixing the registered element error also stopped "Canvas already in use" error. (Registering components: https://react-chartjs-2.js.org/docs/migration-to-v4#tree-shaking)