[Bug]: typescript errors in 6.0.0-beta10

[catapop84]

CheckList

• [X] I agree to follow this project's Code of Conduct
• [X] I have read and followed the Contributing Guide
• [X] I have read and followed the Issue Tracker Guide
• [X] I have searched and referenced existing issues and discussions
• [X] I am filing a BUG report.
• [X] I have managed to reproduce the bug after upgrading to the latest version
• [X] I have created an accurate and minimal reproduction

Version

6.0.0-beta9

In What environments are you experiencing the problem?

No response

Node Version (if applicable)

18.16.0

Link To Reproduction

https://stackblitz.com/edit/stackblitz-starters-bcvgpq?file=src%2Ftest-fabric%2Ftest-fabric.component.ts

Steps To Reproduce

I'm trying to embed fabricjs in an Angular project. This is a new project . I only try to import Canvas : import {Canvas} from "fabric";

At compilation I'm receiving the following typescript errors:

Error: node_modules/fabric/dist/src/filters/HueRotation.d.ts:14:22 - error TS2417: Class static side 'typeof HueRotation' incorrectly extends base class static side 'typeof ColorMatrix'.
  The types of 'defaults.mainParameter' are incompatible between these types.
    Type 'keyof HueRotation | undefined' is not assignable to type 'keyof ColorMatrix | undefined'.

14 export declare class HueRotation extends ColorMatrix {

and

Error: node_modules/fabric/dist/src/shapes/Image.d.ts:33:22 - error TS2420: Class 'Image<Props, SProps, EventSpec>' incorrectly implements interface 'ImageProps'.
  Property 'crossOrigin' is missing in type 'Image<Props, SProps, EventSpec>' but required in type 'ImageProps'.

33 export declare class Image<Props extends TProps<ImageProps> = Partial<ImageProps>, SProps extends SerializedImageProps = SerializedImageProps, EventSpec extends ObjectEvents = ObjectEvents> extends FabricObject<Props, SProps, EventSpec> implements ImageProps {
                        ~~~~~

  node_modules/fabric/dist/src/shapes/Image.d.ts:15:5
    15     crossOrigin: string | null;
           ~~~~~~~~~~~
    'crossOrigin' is declared here.

My tsconfig.json is the default one when you create a new angular project.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Expected Behavior

should not receive any of those error

Actual Behavior

receive compilation errors

Error Message & Stack Trace

No response

[catapop84]

Some updates to wrong types:

Error: node_modules/fabric/dist/src/shapes/Text/Text.d.ts:194:5 - error TS2416: Property 'path' in type 'Text<Props, SProps, EventSpec>' is not assignable to the same property in base type 'UniqueTextProps'.

and

Error: node_modules/fabric/dist/src/shapes/Textbox.d.ts:184:5 - error TS2416: Property 'toObject' in type 'Textbox' is not assignable to the same property in base type 'IText<ITextProps, SerializedITextProps, ITextEvents>'.

and some duplicate

Error: node_modules/fabric/dist/src/shapes/Path.d.ts:38:17 - error TS2300: Duplicate identifier 'path'.

38     constructor(path: TComplexPathData | string, { path, left, top, ...options }?: Partial<Props>);

[jiayihu]

9014 should fix the toObject issue

[CommanderAlchemy]

I downloaded the latest "6.0.0-beta15" and also got this issue.

Error: node_modules/fabric/dist/src/filters/HueRotation.d.ts:14:22 - error TS2417: Class static side 'typeof HueRotation' incorrectly extends base class static side 'typeof ColorMatrix'.
  The types of 'defaults.mainParameter' are incompatible between these types.
    Type 'keyof HueRotation | undefined' is not assignable to type 'keyof ColorMatrix | undefined'.

14 export declare class HueRotation extends ColorMatrix {
                        ~~~~~~~~~~~

Error: node_modules/fabric/dist/src/shapes/Path.d.ts:39:17 - error TS2300: Duplicate identifier 'path'.

39     constructor(path: TComplexPathData | string, { path, left, top, ...options }?: Partial<Props>);
                   ~~~~

Error: node_modules/fabric/dist/src/shapes/Path.d.ts:39:52 - error TS2300: Duplicate identifier 'path'.

39     constructor(path: TComplexPathData | string, { path, left, top, ...options }?: Partial<Props>);

[Smrtnyk]

same here

[Smrtnyk]

I fixed the issue by making sure nothing gets imported from fabric/src and also skipLibCheck is off on tsconfig

[maxbauer]

Same for me using fabric 6.4.2 from npm with Angular 18.2.2 When importing the Canvas the v6 way: import { Canvas } from 'fabric';

I'm getting the following errors:

Property 'toObject' in type 'Composed' is not assignable to the same property in base type 'BaseFilter<"Composed", ComposedOwnProps>'.

node_modules/fabric/dist/src/filters/Composed.d.ts:29:4:
      29 │     toObject(): {

and

TS2416: Property 'toObject' in type 'HueRotation' is not assignable to the same property in base type 'ColorMatrix<"HueRotation", HueRotationOwnProps>'

node_modules/fabric/dist/src/filters/HueRotation.d.ts:26:4:
      26 │     toObject(): {

'matrix' is declared here
    node_modules/fabric/dist/src/filters/ColorMatrix.d.ts:62:8:
      62 │         matrix: TMatColorMatrix;

With "skipLibCheck": true, it works fine, but in my opinion the types should also work correctly.

[asturur]

Can you point out this type error in a simple TS reproduction case? so we can look into it. If you can make it happen in a TS file importing fabric please open an issue