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>
</>
);
}