question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
patientplatypuscommented, Aug 12, 2017

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

1reaction
paramahamsacommented, Aug 12, 2017

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).

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't import a spritesheet in React (w/webpack) #4219 - GitHub
Seemingly no matter what I do I cannot get a spritesheet to import in React. I've tried doing: var littlemarioforwardwalk = PIXI.loader.
Read more >
React, importing and using SVG sprite in a React component
If you don't need any interactions with SVG elements (animation, transitions, etc.), you can deal with svg like any other image.
Read more >
How to auto-generate SVG sprites with webpack and svg ...
The generated sprite will only contain the SVG's that you import into your code. That means that if you forget to import a...
Read more >
react-responsive-spritesheet - npm
React component which helps you to easily apply responsive spritesheet animations on your project.. Latest version: 2.3.9, last published: 4 ...
Read more >
Jason Miller on Twitter: "Please don't import SVGs as JSX. It's ...
It's the most expensive form of sprite sheet: costs a minimum of 3x more than other techniques, and hurts both runtime (rendering) performance ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found