"Cannot read property 'width' of null" error when update v3 to v4

[fancyoung]

When I update pixi.js version v3 to v4, there are some error: 

pixi.js:20965 Uncaught TypeError: Cannot read property 'width' of null
    at CanvasSpriteRenderer.render (pixi.js:20965)
    at Sprite._renderCanvas (pixi.js:20620)
    at Sprite.renderCanvas (pixi.js:9346)
    at Container.renderCanvas (pixi.js:9348)
    at CanvasRenderer.render (pixi.js:16040)

I found out it caused by `var width = texture._frame.width;`, and the `_frame` is null.

But it works fine in v3. I read the `Pixi v4 Migration Guide`, but it seems no relevant.

[xerver]

Can you post a running example of the issue please?

[fancyoung]

2 hours ago, xerver said:

Can you post a running example of the issue please?

Sorry, it's complex code (otherwise I can debug by myself). 

The error happened in CanvasSpriteRenderer, and I find it's new in v4, is there any suggestion debug this?

The chain is:

viewerRenderer.render(viewerStage);

>

CanvasRenderer.prototype.render = function render(displayObject, renderTexture, clear, transform, skipUpdateTransform) {
...
displayObject.renderCanvas(this);
...
}

>

Container.prototype.renderCanvas = function renderCanvas(renderer) {
...
        for (var i = 0, j = this.children.length; i < j; ++i) {
            this.children[i].renderCanvas(renderer);
        }
...
}

>

Sprite.prototype._renderCanvas = function _renderCanvas(renderer) {
        renderer.plugins[this.pluginName].render(this);
    };

>

 CanvasSpriteRenderer.prototype.render = function render(sprite) {
        var texture = sprite._texture;
        var renderer = this.renderer;

        var width = texture._frame.width;   <<<<<< error here
        var height = texture._frame.height;
...
}

Because the texture is:

baseTexture:null
noFrame:true
orig:null
requiresUpdate:false
transform:null
trim:null
valid:false
_events:Events
_eventsCount:1
_frame:null
_rotate:0
_updateID:0
_uvs:null

 

[Taz]

How about this check?

// if baseTexture is null then there's nothing to render, so just return
if (!texture.baseTexture) {
    return;
}

 

Or maybe you need this one?

// if the texture has no frame data then there's nothing to render yet, so just return
if (texture.noFrame) {
    return;
}