[fabricjs]"Trying to initialize a canvas that has already been initialized"

 

개요

Fabric.js를 React 환경에서 사용하다 보면 fabric: Trying to initialize a canvas that has already been initialized. Did you forget to dispose the canvas? 오류를 만날 수 있습니다. 이 오류는 Fabric.js에서 동일한 Canvas를 여러 번 초기화하려고 할 때 발생합니다. 본 글에서는 해당 오류가 발생하는 원인과 해결 방법을 정리합니다.

오류 발생 원인

Fabric.js는 캔버스를 생성하고 관리하는 라이브러리로, React의 StrictMode에서 두 번 렌더링되는 경우가 있습니다. 이에 따라 useEffect 훅 내부에서 new fabric.Canvas()를 실행하면 두 번 생성되면서 위 오류가 발생할 수 있습니다.

이와 관련하여 GitHub의 이슈 #10136와 Stack Overflow의 질문 My React Component is rendering twice because of Strict Mode에서도 같은 문제가 보고되었습니다.

해결 방법

StrictMode 비활성화

React의 StrictMode는 개발 환경에서 컴포넌트의 useEffect를 두 번 실행하게 만듭니다. 따라서 개발 중이라면 StrictMode를 비활성화하면 오류가 발생하지 않습니다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  // <React.StrictMode>  // 이 줄을 주석 처리
    <App />
  // </React.StrictMode>
);

 

이러한 방법을 적용하면 Fabric.js를 안정적으로 React 환경에서 활용할 수 있습니다.