Hi there,

I've been working off the ts-webgl-overlay branch and the "Made some changes to make it work on old browsers" commit seems to have broken my react spine setup. The spine character doesn't show up anymore.

When I reverted this part of the commit, things seem to work again:

here is my react setup for my spine component below, and i've imported the spine-webgl.min.js file into my page:

const SpineChibi = ({
  animation,
  skins,
  isCustomFit,
  scale = 1,
  offsetX = 0,
  offsetY = 0,
  hairColor,
  skinColor,
  width,
  height,
}: SpineChibiProps) => {
  const identifier = useMemo(() => `spine-widget-${uuidv4()}`, []);

  useEffect(() => {
    const updateWidget = async () => {
      // @ts-ignore
      const widget = spine.getSpineWidget(identifier);

      const loadedWidget = await widget.loadingPromise;
      const { state, skeleton, bounds } = loadedWidget;

      // @ts-ignore
      const newSkin = new spine.Skin("new-skin");
      skins.forEach((skin) => {
        const skinEntry = skeleton.data.findSkin(skin);
        if (skinEntry) {
          newSkin.addSkin(skinEntry);
        }
      });

      skeleton.setSkin(newSkin);

      updateSlotColor(skeleton, ["Base", "Hand", "Head", "Ear"], skinColor);
      updateSlotColor(skeleton, ["Hair", "HBangs", "Hbot", "Htop"], hairColor);

      state.setAnimation(0, animation, true);

      if (isCustomFit && width && height) {
        widget.beforeUpdateWorldTransforms = (_skeleton) => {
          // determine the smallest scale ratio
          const scaleW =
            (width / bounds.width) * window.devicePixelRatio * scale;
          const scaleH =
            (height / bounds.height) * window.devicePixelRatio * scale;
          const finalScale = Math.min(scaleW, scaleH);
          // scale the skeleton accordingly
          _skeleton.scaleX = finalScale;
          _skeleton.scaleY = finalScale;
        };
      }
      widget.recalculateBounds();
    };

    updateWidget();
  }, [
    animation,
    skins,
    scale,
    offsetX,
    offsetY,
    skinColor,
    hairColor,
    width,
    height,
  ]);

  return (
    <div
      style={{
        width: width ?? "100%",
        height: height ?? "100%",
      }}
    >
      {/* @ts-ignore */}
      <spine-widget
        identifier={identifier}
        atlas="spine-dynamic-nopremult/char.atlas"
        skeleton="spine-dynamic-nopremult/char.skel"
        animation={animation}
        skin={skins[0]}
        clip="true"
        mode="inside"
        fit={isCustomFit ? "none" : "fit"}
      />
    </div>
  );
};