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

[llaalgol]

Hi,

I'm developing a stateful canvas with two listeners that track changes and save them to localStorage. Upon loading, it checks for and restores any stored data.

The canvas loads, but I’m encountering an unresolved error, and objects are positioned at the top.

Error

Failed to restore canvas state: TypeError: Cannot read properties of undefined (reading 'clearRect')
    at An.clearContext (index.min.mjs:76:29815)
    at An.clear (index.min.mjs:76:142227)
    at An.clear (index.min.mjs:76:159839)
    at eval (index.min.mjs:76:38614)
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
eval @ loadSavedCanvasState.ts:11
Promise.catch
loadSavedCanvasState @ loadSavedCanvasState.ts:11
eval @ index.tsx:34
commitHookEffectListMount @ react-dom.development.js:21102
invokePassiveEffectMountInDEV @ react-dom.development.js:23980
invokeEffectsInDev @ react-dom.development.js:26852
legacyCommitDoubleInvokeEffectsInDEV @ react-dom.development.js:26835
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:26816
flushPassiveEffectsImpl @ react-dom.development.js:26514
flushPassiveEffects @ react-dom.development.js:26438
performSyncWorkOnRoot @ react-dom.development.js:24870
flushSyncWorkAcrossRoots_impl @ react-dom.development.js:7758
flushSyncWorkOnAllRoots @ react-dom.development.js:7718
commitRootImpl @ react-dom.development.js:26369
commitRoot @ react-dom.development.js:26077
commitRootWhenReady @ react-dom.development.js:24749
finishConcurrentRender @ react-dom.development.js:24714
performConcurrentWorkOnRoot @ react-dom.development.js:24559
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534

Listener

import { useZustand } from '@/libraries/zustand/store';

export function localStorageListener() {
  const fabric = useZustand.getState().fabricRef;
  function saveCanvasState() {
    if (!fabric) return;

    const canvasStateJSON = JSON.stringify(fabric.toJSON());
    localStorage.setItem('canvasState', canvasStateJSON);
  }
  fabric?.on('object:added', saveCanvasState);
  fabric?.on('object:removed', saveCanvasState);
}

Helper

import type { Canvas } from 'fabric';

export async function loadSavedCanvasState(canvasInstance: Canvas) {
  const savedCanvasJSON = localStorage.getItem('canvasState');

  if (!savedCanvasJSON) return;

  canvasInstance
    .loadFromJSON(savedCanvasJSON)
    .then((canvas) => canvas.requestRenderAll())
    .catch((error) => console.error('Failed to restore canvas state:', error));
}

Additionals

"dependencies": {
  "fabric": "^6.0.2",
  "next": "14.2.5",
  "react": "^18",
  "react-dom": "^18", 
}

[wllcyg]

Probably an asynchronous issue.

[asturur]

I see you are using react.
It could happen that your canvas instance reference a canvas element that has been wiped from the dom by some re-render cycle and the context of the canvas is gone.
Those problem are hard to debug without a reproduction case

[taqimustafa]

@alwalxed instead of directly using state management, i stored a ref to handle JSON which Worked fine for me (i was implementing Undo/Redo functionality which is somewhat similar to what you are trying to do).

As @asturur mentioned, we need to avoid Canvas being re-rendered while we are using loadFromJSON method.

[asturur]

The canvas element, the html one, being react-re-rendered during jsdom. Also try to add a key to it, sometimes with a key react doesn't kill it ( not that you can count on it )

[dilwalashakib]

restore canvas state: TypeError: Cannot read properties of undefined (reading 'clearRect')
at wn.clearContext (StaticCanvas.ts:464:9)
at wn.clear (SelectableCanvas.ts:1309:10)
at wn.clear (Canvas.ts:1557:11)
at StaticCanvas.ts:1314:12

[msanjayachar]

React strict mode in development runs useEffect twice.

useEffect(() => {
console.log("MOUNT");
return () => console.log("UNMOUNT");
}, []);

this logs. mount -> unmount -> mount (back again).
this should actually only be.
mount -> unmount

Verify with this.

in nextjs turning it off. Resolves the issue for me.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
reactStrictMode: false,
typescript: {
ignoreBuildErrors: true,
},
};

export default nextConfig;