import JSON file to a Spine-Player React.js

Question

i`am trying to add spine animation to my React app and get issue that component with spine dont rendering :( here is mu code

import { SpinePlayer } from "@esotericsoftware/spine-player";
import atlasData from "../../images/spine/ai_girl/ai_girl.atlas";
import jsonData from "../../images/spine/ai_girl/ai_girl.json";

const SpineGirl2 = () => {
  new SpinePlayer("player-container", {
    jsonUrl: jsonData,
    atlasUrl: atlasData,
    animation: "idle_anim",
    showControls: false,
    backgroundColor: "#00000000",
    alpha: true,
    viewport: {
      debugRender: true,
    },
  });

  return <div id="player-container"></div>;
};
export default SpineGirl2;

at browser i get an error Uncaught SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON https://monosnap.com/file/z9bBPtOzaYEcIkQoMW0FQdfGcxaAkF

also, if a just console.log this value (jsonData ) at same place i get data, but in SpinePlayer i get error at network i also get error in pass. https://monosnap.com/file/XBolcXtTBQpPmrDW4YCAvtbi0idQeW

meanwhile, the file with atlas "atlasData", that imports one string above, i get the data https://monosnap.com/file/JOrQO1S6zvBQuXEzh56GJYGIwf7qND

import JSON file to a Spine-Player React.js

0 Answers0