Object literal may only specify known properties, and 'fabricRef' does not exist in type '{ canvas: Canvas | null; }'

[Avani011]

The page.ts code gives an error in the part where we create an event listener for resizing and using the reference of fabric.js.

{
const canvasRef = useRef(null);
const fabricRef = useRef<fabric.Canvas | null>(null);
const isDrawing = useRef(false);
const shapeRef = useRef<fabric.Object | null>(null);
const selectedShapeRef = useRef<String | null>(null);

useEffect(() => {
const canvas = initializeFabric({ canvasRef, fabricRef})

canvas.on("mouse:down", (options) => {
  handleCanvasMouseDown({
    options,
    canvas,
    isDrawing,
    shapeRef,
    selectedShapeRef,
  })
})

window.addEventListener("resize", () => {
  handleResize({fabricRef})
})

}), [];
}

[lucybits]

i ran into this exact issue while working with the project too, and i think i've figured out what's going wrong! TypeScript is strict about types (as we all know 😅), and the object { fabricRef } doesn’t match what it’s expecting, so we need to make sure both the fabricRef and the functions (initializeFabric and handleResize) are properly typed