Cannot click on an hexagon in an hexagon map Pixi.js (Vue)

Question

I have a map of hexagon using pixi.js and when i want to add a click event listener to my hexagons

 const hex = new PIXI.Graphics();
          hex.beginFill(0xffffff, 1);
          hex.lineStyle(2.5, 0xffffff, 1);
          hex.drawPolygon(hexPoints.map((p) => new PIXI.Point(p.x, p.y)));
          hex.x = hexCenter.x;
          hex.y = hexCenter.y;

          hex.eventMode = "dynamic";
          hex.hitArea = new PIXI.Polygon(hexPoints.map((p) => new PIXI.Point(p.x, p.y)));
          hex.on("click", handleClick);
          function handleClick() {
            console.log(`Clicked on hexagon at grid coordinates (${coord.x}, ${coord.y})`);
            hex.off("click", handleClick); // remove the event listener
            app.stage.removeChild(hex); // remove the hexagon from the stage
          }
          app.stage.addChild(hex);

i have this error when i click on one of them or when i move my mouse around. I tried to set a onclick event on the pixi app and locate it but the x and y of my click are depending on the position on my screen not on the map.. Any help or idea ?

The error i get

Answer 1

I had the same error working on with Vue 3 and pixijs. The problem is if you use vue reactive api(ref) mixed with standart js declarations(const, let) it starts to throw error. For example I had something like this;

Throws Error;

const container = ref<Container>()
container.value = new Container()
// container props
const myGraphic = new Graphics()
myGraphic.eventMode = "static"
container.value.addChild(myGraphic)

If you do as above it throws the same error you had.

Fix ;

const container = ref<Container>()
const myGraphic = ref<Graphics>()
container.value = new Container()
myGraphic.value = new Graphics()
// setup myGraphics
myGraphic.eventMode = "static"
container.value.addChild(myGraphic)