React项目中Spine-Player加载JSON文件报错无法渲染求助

你错误地将已经被webpack解析后的JSON对象/Atlas文本传给了SpinePlayer的jsonUrl和atlasUrl参数。这两个参数要求传入的是资源文件的URL路径，而非解析后的数据。SpinePlayer会把你传入的解析数据当作URL去请求，最终返回404页面（HTML内容），自然会触发JSON解析错误。

方案1：传入资源URL路径 #

通过require获取资源的实际URL（而非解析后的数据），并在组件挂载后初始化播放器（确保DOM容器已存在）：

import { SpinePlayer } from "@esotericsoftware/spine-player";
import { useEffect } from "react";

const SpineGirl2 = () => {
  useEffect(() => {
    // 获取资源的URL路径
    const jsonUrl = require("../../images/spine/ai_girl/ai_girl.json").default;
    const atlasUrl = require("../../images/spine/ai_girl/ai_girl.atlas").default;

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

    // 组件卸载时销毁播放器，避免内存泄漏
    return () => player.dispose();
  }, []);

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

方案2：直接传入解析后的数据 #

如果已经导入了解析后的JSON对象和Atlas文本，改用json和atlas参数（不带Url后缀）直接传入数据：

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

const SpineGirl2 = () => {
  useEffect(() => {
    const player = new SpinePlayer("player-container", {
      json: jsonData, // 直接传解析后的JSON对象
      atlas: atlasData, // 直接传Atlas文本内容
      animation: "idle_anim",
      showControls: false,
      backgroundColor: "#00000000",
      alpha: true,
      viewport: {
        debugRender: true,
      },
    });

    return () => player.dispose();
  }, []);

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

• 必须通过useEffect（空依赖数组）初始化播放器，确保player-container元素已渲染到DOM中，避免SpinePlayer找不到容器。
• 务必添加清理函数销毁播放器，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Рустам Асланов