Davide
Hi,
So I did the following but still having error:

1. I changed the dependency to "@esotericsoftware/spine-player": "4.0.28",.
2. Changed the code to the following:

   const hrefOfSkeleton = '/actions/pokemon/regular/194/action/move.skel';
   
   const targetRef = React.useRef<HTMLDivElement>(null);
   const playerRef = React.useRef<SpinePlayer>();
   
   React.useEffect(() => {
     if (!hrefOfSkeleton || !targetRef.current) {
       return;
     }
   
     console.log('SpinePlayer creation', hrefOfSkeleton);
     const playerLocal = new SpinePlayer(targetRef.current, {
       binaryUrl: hrefOfSkeleton,
       atlasUrl: hrefOfSkeleton.replaceAll('.skel', '.atlas'),
     });
   
     playerRef.current = playerLocal;
   
      return () => playerRef.current?.dispose();
   }, [hrefOfSkeleton, targetRef.current]);
   
   return <div ref={targetRef}/>;

3. Disabled the plugin causing Removing unpermitted intrinsics, this is caused by MetaMask.
4. Close out every other pages of the same app to resolve context disposal issue. It seems like it's simply because I opened too many pages.

Then, I tried with both .json and .skel extension, but no luck on my end. This is with strict mode disabled already.

If your code works fine and happen to be React-usable, may I test with your code?

Also, v4.0.28 in TypeScript seems to have some typing issue as simply supplying binaryUrl and atlasUrl gives me the following typing error, and if I check the typing, every property of SpinePlayerConfig is marked as required.

As a side note, pixi-spine works fine with the same set of files, but missing some parts in the animation.

Somehow I can't edit the previous reply. Please delete it. This is my current progress and questions:

Davide
Hi,
So I did the following but still having error:

1. I changed the dependency to "@esotericsoftware/spine-player": "4.0.28", as well as "@esotericsoftware/spine-core": "4.0.28",. Without specifying spine-core and previous history of installing 4.2, it will stuck at 4.2 causing read error.
2. Changed the code to the following:

   const hrefOfSkeleton = '/actions/pokemon/regular/194/action/move.skel';
   
   const targetRef = React.useRef<HTMLDivElement>(null);
   const playerRef = React.useRef<SpinePlayer>();
   
   React.useEffect(() => {
     if (!hrefOfSkeleton || !targetRef.current) {
       return;
     }
   
     console.log('SpinePlayer creation', hrefOfSkeleton);
     const playerLocal = new SpinePlayer(targetRef.current, {
       binaryUrl: hrefOfSkeleton,
       atlasUrl: hrefOfSkeleton.replaceAll('.skel', '.atlas'),
       success: () => console.log('success'),
       error: () => console.log('error'),
       loading: (_, delta) => console.log('loading', delta),
     });
   
     playerRef.current = playerLocal;
   
      return () => playerRef.current?.dispose();
   }, [hrefOfSkeleton, targetRef.current]);
   
   return <div ref={targetRef}/>;

3. Disabled the plugin causing Removing unpermitted intrinsics, this is caused by MetaMask.
4. Close out every other pages of the same app to resolve context disposal issue. It seems like it's simply because I opened too many pages of the same app.

Then, it somehow stuck permanently at the loading stage.

Also, v4.0.28 in TypeScript seems to have some typing issue as simply supplying binaryUrl and atlasUrl gives me the following typing error, and if I check the typing, every property of SpinePlayerConfig is marked as required.

Can't edit my previous response again, so I have to post it separately, sorry.

One other issue is that if I install dependency like "@esotericsoftware/spine-player": "~4.0",, it will install 4.2 spine-core and spine-webgl for me, which seems to be why it's causing the error. I am using yarn for package manager, if it matters.

I think dependencies should be ~4.0 as well, instead of ^4.0.28, so it stick to major.minor versioning regarding runtime, in spine-player and spine-webgl.

Sorry again, I wish I could delete all my previous responses but it doesn't seem like I am able to do so.

The only issue left is the dependency issue - I currently set my package.json to have the following to force the version:

"resolutions": {
  "@esotericsoftware/spine-core": "~4.0",
  "@esotericsoftware/spine-webgl": "~4.0"
}

Once set, I can finally load the animation! Thanks for the help. I still got a few questions though:

1. With React strict mode on, it will load the player quite quickly then dispose it before it even ends. If it's possible to keep this on without doing some hacks to not running the useEffect() twice, it'll be great.
   
2. Is there any anti-aliasing going on? Left side is using pixi-spine and right side is using spine-player. There's an obvious difference on the head of the character. Left side should be how it looks like.
   
3. Based on what actually renders in the game and what's inside the png file, there should be an antenna-like object to render. But neither pixi-spine nor spine-player have been able to render it. I thought Spine Web Player would be able to render it, that's why I am giving Spine Web Player a try. May I know what am I missing here?
   
4. Is there anyway to remove that large "Spine" marking? Even if reducing it to the size to about 20px tall at the right bottom is fine...It's just too big and the demo website with controls doesn't even have it, if the control is not shown.

Thanks for answering all these questions!

Sorry again. I really wish I could delete my response after finding the issue.
Typing issue, and the behavior under strict mode are the only things left!

Hi Davide,
Hope you had a great vacation and thanks for responding as always!

Is it fine if I submit PR instead so you guys can patch it? I understand that due to the maintenance effort needed, it's not possible port all fixes to old versions.

Davide
Glad to hear!
Please check EsotericSoftware/spine-runtimes2626.

No problem and thanks!

Thanks for all your help as well!