Getting 2 errors after updating to pixi.js@7.2

[meghe2000]

I get these errors in this version.

"pixi-viewport": "^5.0.1",
"pixi.js": "^7.2.3",

---

Deprecation Warning: Setting interactive is deprecated, use eventMode = 'none'/'passive'/'auto'/'static'/'dynamic' instead.Deprecated since v7.2.0

---

Uncaught TypeError: Cannot read properties of undefined (reading 'domElement') at $.addListeners (pixi_viewport.js:1159:739) at new $ (pixi_viewport.js:1156:48) at new ht (pixi_viewport.js:1364:565) at new Stage (Stage.js:24:23) at eval (player.js:15:24) at ./test/player.js (main.js?b9b25c6569ab0343bde4:1957:1) at __webpack_require__ (main.js?b9b25c6569ab0343bde4:5979:33) at fn (main.js?b9b25c6569ab0343bde4:6190:21) at eval (index.js:2:70) at ./index.js (main.js?b9b25c6569ab0343bde4:84:1)

---

Uncaught TypeError: Cannot read properties of undefined (reading 'update') at ht.update (pixi_viewport.js:1370:33) at options.noTicker.tickerFunction [as fn] (pixi_viewport.js:1364:466) at TickerListener.emit (TickerListener.mjs:23:14) at _Ticker.update (Ticker.mjs:150:29) at _tick (Ticker.mjs:28:14)

[lazharichir]

Got the same ones on and off – the pinching and scrolling/zooming also causes errors but it still works...

Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
    at _EventSystem.mapPositionToPoint (EventSystem.ts:629:30)
    at $.getPointerPosition (pixi_viewport.js:1188:41)
    at $.handleWheel (pixi_viewport.js:1193:42)
    at HTMLCanvasElement.wheelFunction (pixi_viewport.js:1138:646)

[hevans90]

Also getting this with .wheel() enabled:

EventSystem.mjs:252 Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
    at _EventSystem.mapPositionToPoint (EventSystem.mjs:252:1)
    at $.getPointerPosition (pixi_viewport.js:1188:1)
    at $.handleWheel (pixi_viewport.js:1193:1)
    at HTMLCanvasElement.wheelFunction (pixi_viewport.js:1138:97)

This hard crashes my react app due to uncaught runtime errors.

[tomlagier]

If you're using react-pixi, this is likely happening because you are rendering in a <React.StrictMode> wrapper which is mounting your app twice. For some reason, the teardown syncing between pixi-react and pixi-viewport isn't working correctly, and pixi-viewport is hanging on to the old app & EventSystem.

My guess for why that is is that the destroy call is from the Wheel plugin is erroring because the events.domElement is destroyed before it gets called, which prevents the Viewport from being cleaned up, leading to two simultaneous EventSystems, one which is working properly and one which is erroring.

Not sure of the fix (maybe just nullguard the Wheel destroy call?) but it's easy to fix in your apps until it's addressed - just don't use React.StrictMode.

[LouisGusta]

Removing StrictMode from react solved some of my issues, however I'm still having Destroy(t) related errors

For some reason when the application changes pages (I'm developing a game and when the player wins the game it sends information to the server which redirects it to the next page)

however it seems that when the elements are destroyed, it gives me an error of not accessing the 'next' element inside ticker.ts

ht.destroy error also appears inside pixi_viewport.ts

and _removeChild inside hostconfig.js

Anyone having similar problems too?

my project: https://github.com/MatzeStudios/mazeonline/blob/mouse-fix/frontend/src/components/GameScreen/index.js

[talhaozdemir]

                // import { EventSystem } from "@pixi/events";
        const events = new EventSystem(app.renderer);
        events.domElement = app.renderer.view;

        viewport = new Viewport({
            screenWidth: window.innerWidth,
            screenHeight: window.innerHeight,
            worldWidth: 1000,
            worldHeight: 1000,
            events: events,
        });

This setup solved the issue for me.

[ben4d85]

...however I'm still having Destroy(t) related errors

For some reason when the application changes pages...

however it seems that when the elements are destroyed, it gives me an error of not accessing the 'next' element inside ticker.ts

ht.destroy error also appears inside pixi_viewport.ts

and _removeChild inside hostconfig.js

Anyone having similar problems too?

@LouisGusta I get the same issue, see my comment here: https://github.com/davidfig/pixi-viewport/issues/438#issuecomment-1637052368

[khoakomlem]

                // import { EventSystem } from "@pixi/events";
      const events = new EventSystem(app.renderer);
      events.domElement = app.renderer.view;

      viewport = new Viewport({
          screenWidth: window.innerWidth,
          screenHeight: window.innerHeight,
          worldWidth: 1000,
          worldHeight: 1000,
          events: events,
      });

This setup solved the issue for me.

Worked for me.

[ben4d85]

@meghe2000 I believe the first problem you mentioned, the deprecation warning, has been resolved. See my comment here: https://github.com/davidfig/pixi-viewport/issues/453#issuecomment-1727914417

[ben4d85]

@LouisGusta Regarding the destroy related errors, I found a solution that works for me. See my comment here: https://github.com/davidfig/pixi-viewport/issues/438#issuecomment-1727742746

[ben4d85]

@meghe2000 Do you have any further problems, or can this be closed now?