util.enlivenObjects is not working properly on v6.3.0, but it is fine in v5.4.0

[famasboy888]

CheckList

• I agree to follow this project's Code of Conduct *
• I have read and followed the Contributing Guide *
• I have read and followed the Issue Tracker Guide *
• I have searched and referenced existing issues and discussions *
• 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
6.3.0

In What environments are you experiencing the problem?

• chrome, edge
• ReactJS

Node Version (if applicable)
None

Link To Reproduction
https://codesandbox.io/p/sandbox/upbeat-heisenberg-npkzng?file=%2Fsrc%2FApp.js

Steps To Reproduce

1. use latest fabric v6.3.0 via npm
2. initialize canvas element
3. add dummy shape and re-render canvas while using enlivenObjects
4. call cleanup function in useEffect hook

Expected Behavior

I expect v6.3.0 to be able to:

• add objects using enlivenObjects
• behave the same way like v5.4.0 as shown below
• to console.log() something inside the callback function

v5.4.0 (Working):
https://codesandbox.io/p/sandbox/smoosh-fabricv5-4-0-j3x36l?file=%2Fsrc%2FApp.js

export default function App() {
  useEffect(() => {
    //Initialize canvas
    const canvas = new fabric.Canvas("canvas", {
      preserveObjectStacking: true,
    });

    //Load a dummy shape (Blue rect)
    const dummyShape = [
      {
        type: "Rect",
        left: 100,
        top: 100,
        width: 200,
        height: 200,
        fill: "blue",
      },
    ];

    fabric.util.enlivenObjects(dummyShape, (objs) => {
      console.log("Print from enlivenObjects", objs); //Print from enlivenObjects fabric v5.4.0
      objs.forEach((item) => {
        canvas.add(item);
      });
      canvas.renderAll();
    });

    //Clean up function
    return () => {
      canvas.dispose();
    };
  }, []);

  return <canvas id="canvas" width="1000" height="1000"></canvas>;
}

Actual Behavior

v6.3.0 is not able to:

• add objects using enlivenObjects
• to console.log() something inside the callback function

Note: The code in both links are very identical, only the fabric version is different.

v6.3.0 (Not Working):
https://codesandbox.io/p/sandbox/upbeat-heisenberg-npkzng?file=%2Fsrc%2FApp.js

export default function App() {
  useEffect(() => {
    //Initialize canvas
    const canvas = new Canvas("canvas", {
      preserveObjectStacking: true,
    });

    //Load a dummy shape (Blue rect)
    const dummyShape = [
      {
        type: "Rect",
        left: 100,
        top: 100,
        width: 200,
        height: 200,
        fill: "blue",
      },
    ];

    util.enlivenObjects(dummyShape, (objs) => {
      console.log("Print from enlivenObjects", objs); //Print from enlivenObjects fabric v6.3.0
      objs.forEach((item) => {
        canvas.add(item);
      });
      canvas.renderAll();
    });

    //Clean up function
    return () => {
      canvas.dispose();
    };
  }, []);

  return <canvas id="canvas" width="1000" height="1000"></canvas>;
}

Error Message & Stack Trace
None

[famasboy888]

Please disregard. I have found the answer in here for the usage of v6.3.0: https://fabricjs.github.io/api/namespaces/util/functions/enlivenobjects/

[asturur]

Please also read this
https://fabricjs.github.io/docs/upgrading/upgrading-to-fabric-60/

[Amrjigga]

you're a life saver