Bug: React Spring doc - Can't use Stage from '@pixi/react-animated'

[hilmia]

Current Behavior

Stage from "@pixi/react-animated" is not working.

Getting the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PixiTest`.

Following the React Spring doc page

Expected Behavior

To be able to use Stage from '@pixi/react-animated' like explained in the documentation.

Steps to Reproduce

I used the exact same simple usage code provided in the documentation:

import React from 'react';
import { Spring } from 'react-spring';
import { Texture } from 'pixi.js';
import { Stage, Sprite } from '@pixi/react-animated';

const PixiTest = () => (
  <Stage>
    <Spring native from={{ x: 0, y: 0 }} to={{ x: 200, y: 200 }}>
      {(props) => <Sprite texture={Texture.WHITE} tint={0xff0000} {...props} />}
    </Spring>
  </Stage>
);

export default PixiTest

Environment

• @pixi/react version: 7.0.3
• @pixi/react-animated version: 7.0.3
• pixi.js version: 7.2.0
• React version: 18.2.0
• ReactDOM version: 18.2.0
• next version: 13.2.3
• Browser & Version: Chrome 111

Possible Solution

No response

Additional Information

No response

[federico-hv]

@hilmia I was having the same issue in making my animation work. It is not clear in the docs that you should install @pixi/react-animated separately and which components are exported from there. If you check the source code you can see there is no Stage exported now but you have:

BitmapText
Container
Graphics
NineSlicePlane
ParticleContainer
Sprite
AnimatedSprite
Text
TilingSprite
SimpleMesh
SimpleRope

What worked for me was installing @pixi/react-animated manually and use the Sprite from there but the Stage from @pixi/react.

Docs Example

import React from 'react';
import { Spring } from 'react-spring';
import { Texture } from 'pixi.js';
import { Stage, Sprite } from '@pixi/react-animated';

const App = () => (
  <Stage>
    <Spring native from={{ x: 0, y: 0 }} to={{ x: 200, y: 200 }}>
      {(props) => <Sprite texture={Texture.WHITE} tint={0xff0000} {...props} />}
    </Spring>
  </Stage>
);

What worked for me

1. Install pixi.js and @pixi/react as stated in the docs -> npm install pixi.js @pixi/react
2. Manually install @pixi/react-animated too -> npm install @pixi/react-animated
3. Use only Sprite from @pixi/react-animated:

import React from "react";
import { Spring } from "react-spring";
import { Texture } from "pixi.js";
import { Stage } from "@pixi/react"; --------> HERE
import { Sprite } from "@pixi/react-animated";  


const App = () => (
  <Stage>
    <Spring native from={{ x: 0, y: 0 }} to={{ x: 200, y: 200 }}>
      {(props) => <Sprite texture={Texture.WHITE} tint={0xff0000} {...props} />}
    </Spring>
  </Stage>
);

[Zyie]

The above looks correct to me I will get something added to the docs about this