Cannot read property 'width' of null when moving away from screen

[royibernthal]

I have an Ionic app that uses the latest versions of angular 4 and ionic 3.

I'm using PIXI (4.5.2) in one of the screens in it - the game screen.

The player frequently moves in and out of that screen.

 

Before starting the game I'm:

-Preparing resources

-Moving to game screen

-Adding the canvas (app.view) to DOM

 

Before moving away from the game screen I'm:

-Destroying resources and resetting the PIXI.loader

-Removing the canvas (app.view) from DOM

 

Most of the time everything works fine, but rarely when I'm moving away from the game screen I'm getting the following error:

Quote

Runtime Error

Cannot read property 'width' of null

Stack

TypeError: Cannot read property 'width' of null at Image.e.calculateVertices (http://localhost:8100/assets/imageSwapper/pixi.min.js:14:13368) at Image.e._renderWebGL (http://localhost:8100/assets/imageSwapper/pixi.min.js:14:14230) at Image.e.renderWebGL (http://localhost:8100/assets/imageSwapper/pixi.min.js:10:21822) at Swapper.e.renderWebGL (http://localhost:8100/assets/imageSwapper/pixi.min.js:10:21898) at e.renderWebGL (http://localhost:8100/assets/imageSwapper/pixi.min.js:10:21898) at e.render (http://localhost:8100/assets/imageSwapper/pixi.min.js:13:8590) at t.render (http://localhost:8100/assets/imageSwapper/pixi.min.js:10:10909) at t.emit (http://localhost:8100/assets/imageSwapper/pixi.min.js:16:7855) at t.update (http://localhost:8100/assets/imageSwapper/pixi.min.js:16:6834) at _tick (http://localhost:8100/assets/imageSwapper/pixi.min.js:16:5017) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12256) at Object.onInvokeTask (http://localhost:8100/build/main.js:4539:37) at t.invokeTask (http://localhost:8100/build/polyfills.js:3:12177) at n.runTask (http://localhost:8100/build/polyfills.js:3:7153) at invoke (http://localhost:8100/build/polyfills.js:3:13213)

I don't know yet why this error only rarely occurs and why. What do you think?

[ivan.popelyshev]

Can you give me the same stacktrace but with regular pixi.js and not pixi.min.js ? It would be good if you put "pixi.js.map" nearby too

[royibernthal]

For some reason I'm not able to reproduce this issue anymore, if and when this happens again I'll send here the stack trace of the unminified version

[royibernthal]

I finally have an unminified stacktrace (pixi.js - v4.5.3):

Quote

core.es5.js:1084 ERROR TypeError: Cannot read property 'width' of null
    at Image.calculateVertices (Sprite.js:211)
    at Image._renderWebGL (Sprite.js:295)
    at Image.renderWebGL (Container.js:409)
    at Swapper.renderWebGL (Container.js:414)
    at Container.renderWebGL (Container.js:414)
    at WebGLRenderer.render (WebGLRenderer.js:318)
    at Application.render (Application.js:128)
    at TickerListener.emit (TickerListener.js:78)
    at Ticker.update (Ticker.js:394)
    at Ticker._tick (Ticker.js:113)
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.es5.js:4116)
    at t.invokeTask (polyfills.js:3)
    at n.runTask (polyfills.js:3)
    at invoke (polyfills.js:3)

 

[xerver]

Looks like you might have a destroyed sprite in your render tree, or a sprite using a destroyed texture. Can you post a running example we can debug?

Thanks!

[royibernthal]

I think it's solved. Thanks nonetheless

https://github.com/pixijs/pixi.js/issues/4125