[Bug]: Getting Issue with fabric.util.enlivenObjects While loading data received from database

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.
[ ] I have managed to reproduce the bug after upgrading to the latest version
[ ] I have created an accurate and minimal reproduction

Version

5.2.4

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

20.11.0

Link To Reproduction

No reproduction

Steps To Reproduce

I have created a landscape design tool angular app using fabric js.

I have created a custom class to achieve line with arrow functionality. ` LineArrow = fabric.util.createClass(fabric.Line, { type: 'linearrow', initialize: function(element:any, options:any) { options || (options = {}); this.callSuper('initialize', element, options); },

toObject: function() {

return fabric.util.object.extend(this.callSuper('toObject'),this.LineArrow);

},

_render: function(ctx:any) {

this.callSuper('_render', ctx);

this.ctx = ctx;

let p = this.calcLinePoints();

let xDiff = this.x2 - this.x1;

let yDiff = this.y2 - this.y1;

let angle = Math.atan2(yDiff, xDiff);

this.drawArrow(angle, p.x2, p.y2);

ctx.save();

xDiff = -this.x2 + this.x1;

yDiff = -this.y2 + this.y1;

angle = Math.atan2(yDiff, xDiff);

},

drawArrow: function(angle:number, xPos:number, yPos:number) {

this.ctx.save();

this.ctx.translate(xPos, yPos);

this.ctx.rotate(angle);

this.ctx.beginPath();

this.ctx.moveTo(10, 0);

this.ctx.lineTo(-15, 15);

this.ctx.lineTo(-15, -15);

this.ctx.closePath();

this.ctx.fillStyle = this.stroke;

this.ctx.fill();

this.ctx.restore();

}

});

this.LineArrow.fromObject = function (object: any, callback: any) {
```
var _enlivenedObjects;

fabric.util.enlivenObjects(object.objects,  (enlivenedObjects: any) => {

    delete object.objects;

    _enlivenedObjects = enlivenedObjects;

    callback(new this.LineArrow(_enlivenedObjects), object);

},'');
```

//callback && callback(new this.LineArrow([object.x1, object.y1, object.x2, object.y2], object));

};

this.LineArrow.async = true;

When i am creating line arrow on canvas everything works fine

` options = {

      strokeWidth:5,

      fill: '#ff5722',

      stroke: '#ff5722',

      originX: 'center',

      originY: 'center',

      type:'linearrow',

    cornerSize: 6,

    transparentCorners: false,

      id: this.randomId()

    } as IObjectWithId

    add = new this.LineArrow([50, 100, 300, 100], options);

but when i am getting canvas object data from the server and draw object using enlivenObjects. I am getting this issue.

I am also setting fabric.LineArrow before calling the enlivenObjects ` this.LineArrow.fromObject = function (object: any, callback: any) {

    callback && callback(new this.LineArrow([object.x1, object.y1, object.x2, object.y2], object));

};

// @ts-ignore silence!
fabric.LineArrow = this.LineArrow;`

But still getting this issue : chrome_K8mG3JdJfs

Expected Behavior

Should draw custom class LineArrow on canvas

Actual Behavior

Getting this issue: chrome_K8mG3JdJfs

Error Message & Stack Trace

No response

fabricjs / fabric.js