| Reference | Downloads | Github

Debuging "Cannot read properties of null (reading 'width')" REALLY NEEDS HELP

Hi there,

My experiment continues to crash and I get the following error:

TypeError: Cannot read properties of null (reading ‘width’)
at Sprite2.calculateVertices (Sprite.ts:313)
at Sprite2._calculateBounds (Sprite.ts:432)
at Sprite2.Container2.calculateBounds (Container.ts:479)
at Sprite2.DisplayObject2.getBounds (DisplayObject.ts:545)
at MaskSystem3.pushSpriteMask (MaskSystem.ts:248)
at MaskSystem3.push (MaskSystem.ts:136)
at Sprite2.Container2.renderAdvanced (Container.ts:641)
at Sprite2.Container2.render (Container.ts:588)
at Container2.render (Container.ts:597)
at Renderer3.render (Renderer.ts:472)

Since I’m new to Javascript, I need help finding the source of the problem or even starting a solution because I’m a bit lost.

Dot production exp

I added some credits so you can run it online without any problem

I just tried it but didn’t get any error messages early on.

Try Ctrl-Shift-R to flush the cache.


Thanks so much for the reply, the advice did not help unfortunately

Indeed, the experiment sometimes works smoothly, and sometimes crashes.

I shortened the times of the first loop so that the problem could be viewed quickly.

There don’t seem to be any references to your experiment JS (Xp1_.js) in the error messages.

However, I’ve never come across Sprite.ts, TreeSearch.ts and InteractionManager.ts before.


     * Tests if a point is inside this sprite
     * @param {PIXI.IPointData} point - the point to test
     * @return {boolean} the result of the test
    public containsPoint(point: IPointData): boolean
        this.worldTransform.applyInverse(point, tempPoint);

        **const width = this._texture.orig.width;**
        const height = this._texture.orig.height;
        const x1 = -width * this.anchor.x;
        let y1 = 0;

        if (tempPoint.x >= x1 && tempPoint.x < x1 + width)
            y1 = -height * this.anchor.y;

            if (tempPoint.y >= y1 && tempPoint.y < y1 + height)
                return true;

        return false;


        // If there is a mask, no need to hitTest against anything else if the pointer is not within the mask.
        // We still want to hitTestChildren, however, to ensure a mouseout can still be generated.
        else if (displayObject._mask)
            if (hitTest)
                **if (!((displayObject._mask as any).containsPoint && (displayObject._mask as any).containsPoint(point)))**
                    hitTest = false;

       // ** FREE TIP **! If an object is not interactive or has no buttons in it
        // (such as a game scene!) set interactiveChildren to false for that displayObject.
        // This will allow PixiJS to completely ignore and bypass checking the displayObjects children.
        if (hitTestChildren && displayObject.interactiveChildren && (displayObject as Container).children)
            const children = (displayObject as Container).children;

            for (let i = children.length - 1; i >= 0; i--)
                const child = children[i];

                // time to get recursive.. if this function will return if something is hit..
                **const childHit = this.recursiveFindHit(interactionEvent, child, func, hitTest, interactiveParent);**

                if (childHit)
                    // its a good idea to check if a child has lost its parent.
                    // this means it has been removed whilst looping so its best
                    if (!child.parent)

                    // we no longer need to hit test any more objects in this container as we we
                    // now know the parent has been hit
                    interactiveParent = false;

                    // If the child is interactive , that means that the object hit was actually
                    // interactive and not just the child of an interactive object.
                    // This means we no longer need to hit test anything else. We still need to run
                    // through all objects, but we don't need to perform any hit tests.

                    if (childHit)
                        if (
                            hitTest = false;
                        hit = true;


        const hit =, displayObject, func, hitTest);

            this.processInteractive(interactionEvent, this.lastObjectRendered, this.processPointerMove, true);

Are these part of PsychoPy or custom code?

1 Like

They are all PsychoPy codes

But I do not see the connection to my code (maybe it has to do with the mask, because I do have a mask)

Are you doing something to generate dots and test whether they are inside the circle?

The positions and sizes of the small circles inside the large circles were created in the first place on the basis of the “overlap” method of Python / psychopy.

But now, the information is listed and at the beginning of the experiment imported so that there is no trace of the original code.

Maybe the code that shows an error is related to the width of the line (Line Width in the polygon component)?

Might any of your line widths be undefined or zero?

No, not really.

All sizes of stimuli are set in the builder.

And I used:
x = any (elem is None for elem in various_lists)
print (x)

To find none elements in the list that loads the circles.

i cleard the instructions phase and it still crashing, but it is faster to check:

Xp1_ [PsychoPy]


After over 3000 runs of the experiment I think I have reached the source of the problem.
Both stimuli (large circles with small dots) have a mask that hides their background, and of course is the same mask and the same file, when I remove from one of them the mask (which is not actually necessary for the experiment) has no crash.

Maybe the source of the problem was the overlap between the masks? Maybe an overlap between two masks that are the same file? I do not know. But a solution, at the moment, I have found.

1 Like