Cannot read property ' active' of null

Hi, I just started getting this strange error after switching scenes at runtime. It only points to engine code so I have no idea how to resolve it. Something to do with a button (maybe the button I pressed to switch scenes?..) Any hints greatly appreciated. Thanks

image

I had something similar recently. It was because I was destroying the button in the mouse event handler. I fixed it in the mouse event handler function with code like the following to allow the current call stack to empty before destroying the button. Maybe that could work in your case also.

            setTimeout(function(){

                this.removeDialogButtons();

                this.addDialogButtons();

            }.bind(this), 0 );

Hmmm. I can’t repro this this issue: https://playcanvas.com/editor/scene/1195752

(Button top left)

I think its something to do with unregistering mouse/touch events in a similar way to an error I previously had however when I try to use the same solution that worked in a previous case (unregistering events when it gets destroyed) I just get a bunch of other errors (about hit padding??).

The project is here: PlayCanvas 3D HTML5 Game Engine

Just click on any mattress image and the error will show up. The buttons use the script openProductPage.js

Had a quick look and can’t see anything obvious. As it’s quite a large project, it would be much easier for people to look at a simple reproducible.

I’ve quickly tried this using elements only instead of buttons but can’t reproduce this on a new project

this.entity.element.on('mouseup', function(){
        if (!self.loading) {
            self.loadScene(self.sceneName);       
            self.loading = true;
        }
    });

What entity is named Product_Button? That’s where there error is being thrown on at the moment

Nothing. There are template instances created called ‘Product_Select_Button’.

I can’t find anything in my code or the scene that refers to just ‘Product_Button’

Yeah, a much simpler reproducible would be useful here. The project has a lot of generated content at runtime that makes it difficult to debug.

Thanks but honestly I wouldn’t know where to start to try to reproduce what’s going on because I really don’t know what the error is talking about. Your right, the project is highly data driven from the JSON.

The error occurs when I hit the ‘Product_Select_Button’

In debug (in the PC window) it says: Error loading scripts
In the console it says: Uncaught TypeError: Cannot read property ‘active’ of null
which points to ButtonComponent.get (playcanvas-stable.dbg.js:43169)

My previous scene is getting deleted as soon as the new scene loads which made me think that is what the unregistering of events was the issue, but when I unregister those events upon loading the scene I get:
Uncaught TypeError: Cannot read property ‘hitPadding’ of null

Start by gradually removing parts until the issue stops happening.

Eg.

We know it’s happening between scene loads. Does it occur if the scene with the button has the button already in the scene rather then adding it via code? If so, does it still happen when everything but the button is removed from the scene?

The scene that it loads, what happens if it’s an empty scene? Does the error still occur? etc

1 Like

Hmm. Okay, if i wait a second before destroying the old Heirrachy I no longer get the error ie:

// Load the scenes entity hierarchy
    this.app.scenes.loadSceneHierarchy(scene.url, function (err, parent) {
        if (!err) {
            console.log("About to destory old heirachy");
            setTimeout(() => 
            {
                oldHierarchy.destroy();
            }, 1000);
            
        } else {
            console.error(err);
        }
    });

So Im thinking that the de-registering of events or something weird with buttons continues to run for a frame or so even after the button entity is destroyed .

Think the code above would have any other negative impacts?

I feel like it is hiding the problem and doesn’t handle the root cause so it may come up again with a different symptom or another way.

When that happens, I’ll just do another hack I guess :slight_smile:

To me it seems that button events are still being accessed in the engine on playcanvas-stable.dbg.js:43169 or something for a frame after they get deactivated by my code?!?!?, but I have no access to that, and I really don’t know what I’m talking about anyway :slight_smile:

I think its more nuanced than that as that would have been replicated in my test projects.

I think it’s related to the UI layout or style which is why going down a simple example by working backwards from a fork of the project is the way I would go and have done in the past.

The buttons are contained within a scroll view. Perhaps that has something to do with it?

BTW it even seems to work without error if I wait for just 1 millisecond

Right, got it down to a decent minimum without any branded assets: https://playcanvas.com/editor/scene/1195817

Looks like its just the instance that throws the error? Is that right?

I filed a bug report with the engine: Destroying the scene on a cloned entity element mouseup event fires exception · Issue #3340 · playcanvas/engine · GitHub

For the moment, use the workaround you have now with setTimeout at 0ms or 1ms.

1 Like

Great stuff. Glad it wasn’t me this time. Thanks!