Fabricjs won't initialize - Angular v18

Question

As in the title, I have installed all required packages with no problems.

When I import fabric like so:

import { fabric } from 'fabric';

I get following command line error:

TS2305: Module '"fabric"' has no exported member 'fabric'.

I guess it might be issue with wrong import but I cannot find answer anywhere.

• JSON Derulo: Are you using fabric v5 or v6?
• SolisQuid: @JSONDerulo yes, its v6. This line from below answer seem to do the trick. import * as fabric from 'fabric'

Answer 1

You might be using V6 of fabric.js, go for the below import, as per the documentation.

import * as fabric from 'fabric'; // v6
import { fabric } from 'fabric'; // v5

You can also try to import the individual items using the below import.

import { Canvas, Rect } from 'fabric'; // browser
import { StaticCanvas, Rect } from 'fabric/node'; // node

• SolisQuid: Yep, the v6 line seem to do the trick tho if I just use this line: "import { Canvas, Rect } from 'fabric'; I get following error: "TS2503: Cannot find namespace 'fabric'."
• SolisQuid: do you by any chance know how I can apply local blur to the background image? Just like i would add say circle but it would be a blur not color?
• Naren Murali: @dozobus Does this answer help you?
• SolisQuid: Looks like what I need but after I try to load image with this "fabric.Image.fromURL..." I get this error: "TS2559: Type '(img: any) => void' has no properties in common with type 'LoadImageOptions'." And when I do: "var img = new fabric.Image.fromURL..." I get this: "TS2350: Only a void function can be called with the 'new' keyword."
• Naren Murali: @dozobus if you could share a stackblitz where the error happens, I will check it in a new question please
• jpgarrett: Hi, could you possibly answer to my question too pls? stackoverflow.com/questions/79698358/…