I am trying out the Phaser runtime and is getting the following error when following the sample project from
EsotericSoftware/spine-runtimestree/4.1/spine-ts/spine-phaser/example/typescript

Uncaught TypeError: this.add.spine is not a function

while the following is recognized correctly.

this.load.spineBinary
this.load.spineAtlas

mouse over "this.add.spine" function show me definition in VSCode but give the error mentioned above.

some code:

const NAME = "HeroScene";

export class HeroScene extends Phaser.Scene {
  constructor() {
    super(NAME);
  }

  preload() {
    // console.log("HeroScene.preload() ENTER");

    this.load.spineBinary("data", "assets/spineboy-pro.skel");
    this.load.spineAtlas("atlas", "assets/spineboy-pma.atlas");

    // console.log("HeroScene.preload() EXIT");
  }

  create() {
    console.log(NAME + ".create() ENTER");

    const spineHero = this.add.spine(0, 0, "data", "atlas");
    spineHero.animationState.setAnimation(0, "walk", true);

    console.log(NAME + ".create() Exit");
  }
}

import * as spine from "@esotericsoftware/spine-phaser";
import { useEffect, useRef } from "react";
import { HeroScene } from "./HeroScene";

interface Props {
  flip?: boolean;

  width?: number;
  height?: number;
  size?: number; // if size is larger than 0 , it will override width and height
}

const SpineScene: React.FC<Props> = ({
  flip = false,
  width = 256,
  height = 256,
}) => {
  const gameRef = useRef<HTMLDivElement>(null);

  flip = !flip;

  useEffect(() => {
    const config: Phaser.Types.Core.GameConfig = {
      type: Phaser.AUTO,
      scale: {
        mode: Phaser.Scale.NONE,
        parent: gameRef.current,
        width: width,
        height: height,
      },
      transparent: true,
      scene: [HeroScene],
      plugins: {
        scene: [
          {
            key: "spine.SpinePlugin",
            plugin: spine.SpinePlugin,
            mapping: "spine",
          },
        ],
      },
    };

    const game = new Phaser.Game(config);
    return () => {
      game.destroy(true);
    };
  }, [height, width]);

  return (
    <div
      ref={gameRef}
      style={{
        width: width,
        height: height,
        transform: flip ? "scaleX(-1)" : undefined,
      }}
    ></div>
  );
};

export default SpineScene;

Sample project to reproduce the issue:

Thanks