PIXI.Loader() not working in React.js - Need Help!

[kule90]

I am having hard times to make pixi.js work in react...
Can someone explain me how to get loader in react component?
I have tried withconst pixiApp = useApp();
and const loader = new PIXI.Loader();

but I am unable to get loader - it does not exists.

here is my component where whole point of it is to render images from .json file- spritesheet:

 

import React, { useEffect, useState } from "react";
import { AnimatedSprite, useApp } from "@pixi/react";
import * as PIXI from "pixi.js";
import HeroJSON from "../assets/sprites/hero/hero.json";

const AnimatedSpriteComponent = ({ xPropPos, yPropPos }) => {
  const [frames, setFrames] = useState([]);
  const pixiApp = useApp();

  console.log("pixiApp: ", pixiApp);

  const spritesheet = HeroJSON;

  console.log(" spritesheet: ", spritesheet);

  useEffect(() => {
    const loadTextures = async () => {
      const loadedFrames = [];

      await new Promise((resolve) =>
        pixiApp.loader.add(spritesheet).load((_, resource) => {
          const frames = Object.keys(resource[spritesheet].data.frames).map(
            (frame) => PIXI.Texture.from(frame)
          );
          loadedFrames.push(...frames);
          resolve();
        })
      );

      setFrames(loadedFrames);
    };

    loadTextures();
  }, [pixiApp.loader, spritesheet, pixiApp]);

  if (frames.length === 0) {
    return null;
  }
  return (
    <AnimatedSprite
      anchor={0.5}
      textures={frames}
      isPlaying={true}
      initialFrame={0}
      animationSpeed={0.1}
      width={100}
      height={70}
      x={xPropPos}
      y={yPropPos}
    />
  );
};

export default AnimatedSpriteComponent;

here is console log form 8th line:

 

pixiApp:  
_Application2 {stage: _Container2, renderer: _Renderer2, _ticker: _Ticker2, stop: ƒ, start: ƒ, …}
cancelResize:null
queueResize:null
renderer:null
resize:null
stage:null
start:() => { this._ticker.start(); }
stop:() => { this._ticker.stop(); }
_resizeId:null
_resizeTo:null
_ticker:null

so there is no loader, and everything is empty?

[Answerer1]

You shall not import json file and provide it to loader. Instead put your json file into "public" folder of your project. You can create same path in "public" folder to save import path as is. Then put your import string into loader.add function. It will be look like this 

loader.add("sprite", "./assets/sprites/hero/hero.json")