Получение ошибки Cannot read properties of null (reading 'clearRect') в Fabric.js в Next.js. Я пытаюсь установить фоновое изображение в холсте Fabric.js. image все настроено правильно, но появляется указанная выше ошибка со следующим кодом.
import { fabric } from "fabric";
const { fabricObj, canvas, setCanvas, setObjectSelectForDelete } =
useCanvasContext();
useEffect(() => {
// 1st init fabric canvas object...
const initCanvas = new fabric.Canvas(fabricObj?.current, {
width: "500",
height: "400",
});
fabric.Image.fromURL(
"https://flowbite.com/docs/images/examples/[email protected]",
function (img) {
initCanvas.setBackgroundImage(
img,
initCanvas.renderAll.bind(initCanvas),
{
scaleX: initCanvas.width / img.width,
scaleY: initCanvas.height / img.height,
},
);
},
);
setCanvas(initCanvas);
return () => initCanvas.dispose();
}, []);
Я попытался добавить код внутри блока try catch, но безуспешно.





Вы можете создать новый useEffect, чтобы убедиться, что initCanvas существует, а затем установить изображение. Что-то вроде:
useEffect(() => {
if (initCanvas) {
fabric.Image.fromURL(
"https://flowbite.com/docs/images/examples/[email protected]",
function (img) {
initCanvas.setBackgroundImage(
img,
initCanvas.renderAll.bind(initCanvas),
{
scaleX: initCanvas.width / img.width,
scaleY: initCanvas.height / img.height,
},
);
},
);
}
}, []);