-
Notifications
You must be signed in to change notification settings - Fork 76
Description
Description
Occasionally, when tearing down via rive-react's useRive hook, we're seeing an error in rive-wasm / canvas:
Cannot read properties of undefined (reading 'element') (see screenshot of stack track below)
Provide a Repro
I don't have a repro, but I do have a stacktrace from our Sentry instance:
This clearly shows that observed is undefined.
Our usage is extremely simple:
function CorrectAnimation() {
const { RiveComponent, rive } = useRive({
src: getStaticAssetPath('anims/correct-animation.riv'),
autoplay: true,
layout: new Layout({ fit: Fit.Cover, alignment: Alignment.TopCenter }),
});
return <RiveComponent />;
}Browser & Versions
- Browser: Chrome 130, Firefox 131 (we've seen the error in both)
- OS: macOS 10.15
pnpm -v: 9.5.0@rive-app/react-canvas 4.15.2@rive-app/canvas 2.22.0
Additional context
What I believe is happening:
There is a null check here:
Lines 2104 to 2106 in 9138225
| if (this._observed !== null) { | |
| observers.remove(this._observed); | |
| } |
But not an undefined check, resulting in observed being undefined and then erroring out when observed.element is attempted to be resolved.
As to why observed is undefined, I am not sure. I see that it's conditionally initialized in the constructor... although I don't quite understand how that condition could be false.
Lines 1564 to 1569 in 9138225
| if (params.canvas.constructor === HTMLCanvasElement) { | |
| this._observed = observers.add( | |
| this.canvas as HTMLCanvasElement, | |
| this.onCanvasResize, | |
| ); | |
| } |
One straightforward fix might simply be initializing it to null here (but this does not answer why):
Lines 1491 to 1492 in 9138225
| // Reference of an object that handles any observers for the animation | |
| private _observed: ObservedObject | null; |