pixi.js version: _4.7.0_Hello everyone!
I've the following setup: my React component mounts and the PixiJS application gets initialised. Then the following code gets executed:
this.loader.load((loader, resources) => {
this.app.stage.addChild(this.getImage({ image: item, texture: resources[item.identifier].texture }));
this.sortStage();
});
However, now a problem occurs. If a user navigates away from the page while the loader is still running the following error occurs: Canvas.js:332 Uncaught TypeError: Cannot read property 'addChild' of null
I already implemented the following code to try to solve this issue:
componentWillUnmount() {
this.componentIsMounted = false;
this.app.destroy(true);
this.loader.destroy();
}
But the error still occurs. I can use the this.componentIsMounted inside of the loader to check if the component is still mounted before adding things to the stage (this solution works) but I'd rather just stop the loader. So my question is: how do I stop the loader from loading?
Thanks in advance!
You can call .reset() to abort a load and clear resources, however I bet this isn't the root cause of your issue. I bet it is just not handling errored (or cancelled) resources correctly.
@englercj thanks for your response!
I'm indeed not handling failed (or cancelled) resources correctly since I'm not handling them whatsoever.
However, I don't get how my problem has got anything to do with failed/cancelled resources? The problem is that the React component is already unmounted while the loader is still running. So the loader tries to add children to the stage but the stage is already removed from the DOM.
I'll implement your solution by calling .reset() in componentWillUnmount and will check if it works.
Also I think it's kinda weird that .reset() isn't called by .destroy().
Calling .reset() inside of componentWillUnmount solved my issue.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Most helpful comment
You can call
.reset()to abort a load and clear resources, however I bet this isn't the root cause of your issue. I bet it is just not handling errored (or cancelled) resources correctly.