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:
|
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.
|
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):
|
// Reference of an object that handles any observers for the animation |
|
private _observed: ObservedObject | null; |
Description
Occasionally, when tearing down via rive-react's
useRivehook, 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
observedis undefined.Our usage is extremely simple:
Browser & Versions
pnpm -v: 9.5.0@rive-app/react-canvas 4.15.2@rive-app/canvas 2.22.0Additional context
What I believe is happening:
There is a
nullcheck here:rive-wasm/js/src/rive.ts
Lines 2104 to 2106 in 9138225
But not an
undefinedcheck, resulting inobservedbeingundefinedand then erroring out whenobserved.elementis attempted to be resolved.As to why
observedisundefined, 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.rive-wasm/js/src/rive.ts
Lines 1564 to 1569 in 9138225
One straightforward fix might simply be initializing it to
nullhere (but this does not answer why):rive-wasm/js/src/rive.ts
Lines 1491 to 1492 in 9138225