react pixi events dont work

[aabb]

Hi, i'm absolutely new in react-pixi, spent like few days but nothing works. Can somwbody answer, why this example doesnt work? Neither of these mouse events dont work on sprite, but in examples which i saw they work. React-pixi v7

import React from "react"

import '../styles/styles.css'

 

import { Stage, Sprite } from '@pixi/react';

import img_obstacle from './game resources/img/basic/obstacle.png';

 

export default function Component(props) {

    return(

        <Stage width={750} height={550}>        

            <Sprite

                image={img_obstacle}

                x={300}

                y={300}

                interactive={true}

                pointerdown={() => {console.log("HI")}}

                pointermove={() => {console.log("HI")}}

                mousedown={() => {console.log("HI")}}

                mousemove={() => {console.log("HI")}}

                mouseover={() => {console.log("HI")}}

                mouseout={() => {console.log("HI")}}

                onMouseOver={() => {console.log("HI")}}

                onClick={() => {console.log("HI")}}

            />

        </Stage>  

    )

}

[jasonsturges]

If you're not importing pixi.js to auto-register all the plugins, you'll need to import each system. In this case, add

import '@pixi/events';

Example:

https://codesandbox.io/s/react-pixi-events-ht5pgh

 

[m0loch]

I know it's quite a stupid answer, but I went crazy over a similar behaviour, with the canvas not registering any event except for mouseupoutside and the such.

In the end the problem wasn't related to PIXI itself, the page was just showing another component in front of it with the { display: none } CSS property, check that you're not facing a similar issue..