'Stage' cannot be used as a JSX component

44 Views Asked by At

Just began learning PixiJS and created a react app following tutorial instructions.

Copied and pasted following code didn't let me start the project due to the error in <Stage> component with following text:

'Stage' cannot be used as a JSX component.
  Its type 'typeof Stage' is not a valid JSX element type.
    Type 'typeof Stage' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
      Type 'Stage' is missing the following properties from type 'Component<any, any, any>': context, setState, forceUpdate, render, and 3 more.ts(2786)

I read that probably it means that <Stage> cannot be a root component so it has to be wrapped into React.Fragment. I did it but the problem still remains due to which I cannot continue my learning

Full Code

"use client";

import { BlurFilter } from "pixi.js";
import { Stage, Container, Sprite, Text } from "@pixi/react";
import { useMemo } from "react";

export default function Home() {
    const blurFilter = useMemo(() => new BlurFilter(4), []);

    return (
        <>
            <Stage>
                <Sprite
                    image="https://pixijs.io/pixi-react/img/bunny.png"
                    x={400}
                    y={270}
                    anchor={{ x: 0.5, y: 0.5 }}
                />

                <Container x={400} y={330}>
                    <Text
                        text="Hello World"
                        anchor={{ x: 0.5, y: 0.5 }}
                        filters={[blurFilter]}
                    />
                </Container>
            </Stage>
        </>
    );
}
0

There are 0 best solutions below