While creating a Figma Clone with Next.js, I’m getting the following error when importing fabric.js. Applying the suggestions from Claude temporarily solves the issue, but it seems this isn’t the right approach as I have to modify all the functions in shapes.ts individually. There’s already a red underline under fabric when importing. When I run ‘npm install fabric’, it says “This package is no longer supported.” The instructor’s code runs fine with the same code, but mine doesn’t. I can’t find much when searching. How should I resolve this?

canvas.ts

import { fabric } from "fabric";

....

// initialize fabric canvas
export const initializeFabric = ({
fabricRef,
canvasRef,
}: {
fabricRef: React.MutableRefObject<fabric.Canvas | null>;
canvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
}) => {
// get canvas element
const canvasElement = document.getElementById("canvas");

// create fabric canvas
const canvas = new fabric.Canvas(canvasRef.current, {
width: canvasElement?.clientWidth,
height: canvasElement?.clientHeight,
});

// set canvas reference to fabricRef so we can use it later anywhere outside canvas listener
fabricRef.current = canvas;

return canvas;
};

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

 27 |
28 |   // create fabric canvas

> 29 |   const canvas = new fabric.Canvas(canvasRef.current, {
> |                      ^
> 30 |     width: canvasElement?.clientWidth,
> 31 |     height: canvasElement?.clientHeight,
> 32 |   });

After modifying the code as shown below, dragging on the canvas to create a blue box works without any issues. However, when I try to add a Rectangle, I get the following error again in shapes.ts:
If you need any further clarification or have additional information about the error you’re encountering, please let me know, and I’ll be happy to help you troubleshoot the issue.

import * as fabric from 'fabric';

export const initializeFabric = ({
fabricRef,
canvasRef,
}: {
fabricRef: React.MutableRefObject<fabric.Canvas | null>;
canvasRef: React.MutableRefObject<HTMLCanvasElement | null>;
}) => {
// 이미 초기화된 Canvas가 있다면 제거
if (fabricRef.current) {
fabricRef.current.dispose();
}

const canvasElement = document.getElementById("canvas");

if (!canvasElement || !canvasRef.current) return null;

const canvas = new fabric.Canvas(canvasRef.current, {
width: canvasElement.clientWidth,
height: canvasElement.clientHeight,
});

fabricRef.current = canvas;

return canvas;
};

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

`  10 |
11 | export const createRectangle = (pointer: PointerEvent) => {

> 12 |   const rect = new fabric.Rect({
> |                    ^
> 13 |     left: pointer.x,
> 14 |     top: pointer.y,
> 15 |     width: 100,`

From that point on, no matter how much I try to fix it, errors keep appearing and it’s not getting resolved. It seems impossible for me to use fabric. Is fabric originally incompatible with Next.js? I’ve been stuck on this for hours.