Bug: "Invariant Violation: Sprite texture needs to be typeof `Texture`"

[lukehorvat]

Current Behavior

Creating a texture and passing it to a sprite as a prop:

import { Sprite } from '@pixi/react';
import * as PIXI from 'pixi.js';

const texture = PIXI.Texture.fromBuffer(...);

function Component() {
  return <Sprite texture={texture} />;
}

Results in this error:

Uncaught Invariant Violation: Sprite texture needs to be typeof `Texture`
  at invariant (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:149:15)
  at getTextureFromProps (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:389:5)
  at Sprite (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:605:69)
  at createElement (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:827:16)
  at completeWork (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:15130:29)
  at completeUnitOfWork (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:20253:17)
  at performUnitOfWork (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:20228:6)
  at workLoopSync (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:20126:6)
  at renderRootSync (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:20094:8)
  at recoverFromConcurrentError (webpack-internal:///./node_modules/@pixi/react/dist/index.es-dev.js:19476:21)

For some reason, @pixi/react and pixi.js don't share the same instance of Texture, causing this instanceof check to fail:

https://github.com/pixijs/pixi-react/blob/ab3a672af3f589b4e2cdb24024e534b8145d7942/packages/react/src/utils/props.js#L83

Expected Behavior

The instanceof check should not fail.

Steps to Reproduce

I made a small repo to allow you to easily reproduce the error: https://github.com/lukehorvat/pixi-react-texture-bug

Environment

• @pixi/react version: 7.1.0
• pixi.js version: 7.2.4
• React version: 18.2.13
• ReactDOM version: 18.2.6
• Browser & Version: Chrome 114
• OS & Version: OS X 11.7.8

Possible Solution

No response

Additional Information

No response

[lunarraid]

I've seen this happen when using webpack. What happens is that the bundler is double-importing both the cjs and module versions of PixiJS when you import pixi.js instead of using the individual modules. You can change this behavior in the config, but it gets complicated. See this issue for further info: https://github.com/pixijs/pixijs/issues/8467

[lukehorvat]

Thanks for sharing @lunarraid.

I actually faced the exact same problem with three.js recently too and decided to solve it by updating my tsconfig in favor of ESM. I can't be bothered with any CJS workaround solutions, so I guess I will do the same for pixi.js.

I'll close this issue then since yours covers it. Cheers.

[Jayatubi]

For someone else encounter this issue with webpack + typescript, try this:

// webpack.config.ts
use: {
  loader: 'ts-loader',
  options: {
    transpileOnly: true,
    compilerOptions: {
      module: 'esnext', // Add this
    },
  },
},

[omar-abdul]

I am running to the same issue, am using vite and i do not need to set the module to 'esnext'. because it is simply there, and i am getting the same error

[santoso-wijaya]

I am running to the same issue, am using vite and i do not need to set the module to 'esnext'. because it is simply there, and i am getting the same error

Same here.