CODEWITHSUNDEEP
angulartypescriptangular-cli
born2net
born2net

Reputation: 24983

Typescript, remove error Error:(54, 33) TS2686:'fabric' refers to a UMD global, but the current file is a module. Consider adding an import instead

So I am getting this error:

import {Canvas} from "fabric";

Error:(54, 33) TS2686:'fabric' refers to a UMD global, but the current file is a module. Consider adding an import instead.

I am using fabric in Angular project with TypeScript. It is being imported manually into the project via angular-cli.

 "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "./libs/jquery.base64.js",
        "./store/signage_sdk.js",
        "../node_modules/fabric/dist/fabric.js",

I am also using @types/fabric

how I can quiet this error?

tx

Sean

Upvotes: 3

Views: 8452

Answers (3)

Eirah
Eirah

Reputation: 5

I think you should use 

import { fabric } from 'fabric'

Then use 

new fabric.Canvas()

That should work and quiet the error.

Upvotes: 0

hillin
hillin

Reputation: 1799

Try add

import * as fabric from "fabric";

on the top of the file, and reference Canvas as fabric.Canvas:

const canvas = document.getElementById("test_canvas") as HTMLCanvasElement;
const fabricCanvas = new fabric.Canvas(canvas);

Also, use 

// ReSharper disable once WrongRequireRelativePath

if Resharper complains about the path.

Upvotes: 0

Christos Monogios
Christos Monogios

Reputation: 59

I am not sure if this answers your question but I think it might help you to resolve your problem. Unfortunately I still don't have the reputation to write it as a comment, so here is an "answer".

I dealt with the same error this week. I use React though. In my case the problem was that TSLink suggested me to remove unused imports from my files and in one case the import was React itself. So even though React was not needed, ReactDOM, which I used in that file, wanted it implicitly.

As a result, when I used the ReactDOM properties, they were throwing the same error as in your case, only in my case it was "React" instead of "Fabric".

I also use the typings for these modules.

Regards

Upvotes: 1

Related Questions