TypeError: Cannot read properties of undefined (reading 'clearRect')

[mikhailnathanielabordo]

Hi, not sure if this is related but I'm currently encountering TypeError: Cannot read properties of undefined (reading 'clearRect') after updating the version to 5.2.1 it fails on unit testing. but the application seems to be working correctly. 🤔

I'm also updating from React 16 > React 17.

ImageAnnotationPanel › renders without crashing

    TypeError: Cannot read properties of undefined (reading 'clearRect')

      480 |     const { imageUrl } = this.props;
      481 |
    > 482 |     this.canvas.clear();
          |                 ^
      483 |     this.initAlwaysActiveTools();
      484 |     this.canvas.setBackgroundImage(imageUrl, this.resetCanvas);
      485 |   }

      at klass.clearContext (node_modules/fabric/dist/fabric.js:9567:11)
      at klass.clear (node_modules/fabric/dist/fabric.js:12753:12)
      at klass.clear (node_modules/fabric/dist/fabric.js:2987:52)
      at ImageAnnotationPanel.loadImage (src/components/Workspace/ImageAnnotation/ImageAnnotationPanel.tsx:482:17)
      at ImageAnnotationPanel.componentDidMount (src/components/Workspace/ImageAnnotation/ImageAnnotationPanel.tsx:172:10)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20663:24)
      at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
      at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:23151:9)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority$1 (node_modules/react-dom/cjs/react-dom.development.js:11276:10)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:22990:3)
      at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22329:3)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
      at node_modules/react-dom/cjs/react-dom.development.js:26021:7
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
      at Object.<anonymous> (src/components/Workspace/ImageAnnotation/ImageAnnotationPanel.test.tsx:88:14)

[ShaMan123]

duplicate #7876
solved by #7885

[ShaMan123]

In react you need to cleanup after yourself in a useEffect hook

[CookedApps]

@ShaMan123 What's the correct way to cleanup after yourself?

[ShaMan123]

I wash my hands after the bathroom and before I eat, shower and brush teeth daily, floss... 🤣
Pickup clothes? dishes?
How about you?

---

I had to

Canvas#dispose is the right way.
make sure you don't have any non fabric events that point to fabric etc.
It's a practice not related to fabric but general

[CookedApps]

Thank you, I finally learned how to take care of myself!
...and how to clean up fabric.js the right way. 🙏

[CookedApps]

I just noticed that we are already disposing the canvas as described, but are still getting this error.

[ShaMan123]

I will need more context, a repro...
it depends on the version.
We fixed it not long ago

[Hew007]

duplicate #7876 solved by #7885

Why hasn't it merged and fixed？

[ShaMan123]

It has been, migrate to v6

[Hew007]

I has been, migrate to v6

Now that I have encountered this problem in the production environment, and it only occurs occasionally on a few devices, how can I solve it?

[ShaMan123]

it should have been fixed
try to gather more info including the trace which is very important
what framework are you using? react? are you disposing the canvas? are you animating? did you try to dispose animations?