[Spine Player + ReactJS] TypeError: Vector3 is not a constructor

Ttue · 5 дней назад

Hello,
I'm trying to display spine animation on ReactJS project using runtime NPM. I found @esotericsoftware/spine-player, but after installing it my site can't load anymore and get the following error (I wonder if spine player automatically imports a 3D related module during loading?)
TypeError: Vector3 is not a constructor

What I have tried:

Search for related errors but got no results
Delete node_modules and reinstall but the problem is still there unless I remove spine player npm.

Here are the dependencies and versions I am using.
"dependencies": {
"@emotion/react": "¹¹.13.3",
"@emotion/styled": "¹¹.13.0",
"@esotericsoftware/spine-phaser": "₄.2.62",
"@esotericsoftware/spine-player": "₄.2.18",
"@fontsource-variable/quicksand": "⁵.1.0",
"@mui/icons-material": "⁶.0.2",
"@mui/material": "⁶.0.2",
"@reduxjs/toolkit": "².2.7",
"axios": "¹.7.7",
"formik": "².4.6",
"framer-motion": "¹¹.5.4",
"i18next": "²⁴.2.3",
"i18next-browser-languagedetector": "⁸.0.4",
"i18next-http-backend": "³.0.2",
"notistack": "³.0.1",
"phaser": "³.88.2",
"react": "¹⁸.3.1",
"react-dom": "¹⁸.3.1",
"react-i18next": "¹⁵.4.1",
"react-redux": "⁹.1.2",
"react-router-dom": "⁶.26.2",
"react-slick": "⁰.30.2",
"react-zoom-pan-pinch": "³.7.0",
"slick-carousel": "¹.8.1",
"socket.io-client": "⁴.8.0",
"yup": "¹.4.0"
},
"devDependencies": {
"@eslint/js": "⁹.9.0",
"@types/react": "¹⁸.3.3",
"@types/react-dom": "¹⁸.3.0",
"@types/react-slick": "⁰.23.13",
"@vitejs/plugin-react": "⁴.3.1",
"eslint": "⁹.9.0",
"eslint-plugin-react-hooks": "⁵.1.0-rc.0",
"eslint-plugin-react-refresh": "⁰.4.9",
"globals": "¹⁵.9.0",
"typescript": "⁵.5.3",
"typescript-eslint": "⁸.0.1",
"vite": "⁵.4.1"
}

Thank you in advance!

Spinebot · 5 дней назад

The error you're encountering, "TypeError: Vector3 is not a constructor," suggests that there might be a conflict or an issue with how the Spine Player is being integrated into your ReactJS project. The Spine Player itself should not automatically import any 3D-related modules like Vector3, which is typically associated with 3D libraries such as Three.js. It's possible that there is a conflict with another library or a misconfiguration in your project setup.

Here are a few steps you can try to resolve the issue:

Check for Conflicts: Ensure that there are no other libraries in your project that might be importing or using a Vector3 class. This could be a library like Three.js or any other 3D-related library.
Isolate the Issue: Try creating a minimal React project with just the Spine Player to see if the issue persists. This can help determine if the problem is with the Spine Player itself or with how it's interacting with other parts of your project.
Review Imports: Double-check your imports to ensure that you're not inadvertently importing a 3D library or module that might be causing the conflict.
Check Version Compatibility: Ensure that all your dependencies, especially those related to Spine, are compatible with each other. Sometimes, mismatched versions can lead to unexpected errors.
Debugging: Use browser developer tools to trace where the Vector3 is being called from. This might give you a clue as to which part of your code or which library is causing the issue.

If these steps do not resolve the issue, you might need to provide a more detailed code example or further isolate the problem to get more specific help.

Davide · 5 дней назад

It's quite difficult to determine the cause of the error based on the information you've provided.
Both spine-phaser and spine-player depend on, import, and expose spine-core (that contains Vector3), so the issue might be related to that.

Please try removing spine-phaser and see if the error still occurs.
If it does, the only way we can identify the root cause is by running a minimal project that reproduces the error you mentioned.
You can share the code here or send it to contact@esotericsoftware.com.

Ttue · 4 дня назад

Hi Davide!,
Thank you for your response!.
I found that when using only 1 runtime it will be fine, otherwise it will lead to that error.
For reproduces, you can create two components below and import to App.tsx, then run the project. (Version of both runtimes is 4.2.*)
// PhaserRuntime.component.tsx
import { useEffect } from "react";
import Phaser from "phaser";
// import { SpinePlugin } from "@esotericsoftware/spine-phaser";

const PhaserRuntime = () => {
useEffect(() => {
new Phaser.Game({
type: Phaser.AUTO,
width: 200,
height: 200,
parent: "phaser-container",
scene: [],
// Uncomment the following line will cause Vector3 error
// plugins: {
// scene: [{ key: "SpinePlugin", plugin: SpinePlugin, mapping: "spine" }],
// },
});
}, []);

return <div id="phaser-container" />;
};

export default PhaserRuntime;

// PlayerRuntime.component.tsx
import { useEffect } from "react";
import { SpinePlayer } from "@esotericsoftware/spine-player";

const PlayerRuntime = () => {
useEffect(() => {
new SpinePlayer("player-container", {
jsonUrl:
"http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pro.json",
atlasUrl:
"http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy.atlas",
preserveDrawingBuffer: true,
});
}, []);

return <div id="player-container" style={{ width: 200, height: 200 }} />;
};

export default PlayerRuntime;

Thank you!.

Davide · 4 дня назад

tue

When we ask for a reproduction project, we expect to be able to run it directly. Just copying your code isn’t enough.
You should provide an archive containing a complete minimal project that I can run with npm i and npm start to reproduce the issue.

That said, there’s not much to add: the main problem is that you're using both spine-phaser and spine-player. Why do you need both?

You could try one last thing: install both with the same version. In your package.json snippet, I see:

"@esotericsoftware/spine-phaser": "4.2.62",
"@esotericsoftware/spine-player": "4.2.18",

Also, in the last example you shared, you're using 4.1 assets. Asset and runtime versions should match at least in the major.minor part.