Can't import a spritesheet in React (w/webpack)

Seemingly no matter what I do I cannot get a spritesheet to import in React.

I’ve tried doing:

  var littlemarioforwardwalk = PIXI.loader.resources[require("../../../../../public/mario_characters/littlemarioforwardwalk.json")].textures;
  let spritelittlemarioforwarlkwalk = new PIXI.Sprite(littlemarioforwardwalk[require("../../../../../public/mario_characters/littlemarioforwardwalk.png")]);

As my best guess at how to get it to work and that gives the error “cannot read property textures of undefined”. I’ve tested that my paths are correct and that the files exist (they are and they do). What is wrong here?

I’ve tried several other ways of trying to get this to work (from the examples at kittykatattack and also from here) and nothing seems to work. Is there an update somewhere or a working example I can follow?

The full gist can be seen here: https://gist.github.com/patientplatypus/d7091a02d0965759534ecbc266334756

[patientplatypus]

No, it is an issue with Pixi - if Pixi cannot find files to import with React and webpack then it should say so in the documentation. If it can, it would be nice if there were an example so I didn’t have to guess. I don’t know if I am doing something wrong, Pixi will not work with webpack, or my webpack is misconfigured.

EDIT: Got it. Updated - working gist example here for those that come after:

https://gist.github.com/patientplatypus/4e7696fe9b6fe0b4a5d898d90d991877

Also this is a good resource: https://github.com/pixijs/pixi.js/issues/3393

[paramahamsa]

So its not a PIXI issue, looks like you need help with webpack or whatever tool you are using. The easiest way in this case to use react-create-app, you can put assets to public/assets folder (public will be in the root project folder) and access them as PIXI.loader.add(‘assetName’, ‘/assets/assetName.png’) without issues (at least with webpack in my case).