Skip to content

Cannot read properties of undefined (reading 'element') during cleanupΒ #375

@kirbysayshi

Description

@kirbysayshi

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:

image

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:

rive-wasm/js/src/rive.ts

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.

rive-wasm/js/src/rive.ts

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):

rive-wasm/js/src/rive.ts

Lines 1491 to 1492 in 9138225

// Reference of an object that handles any observers for the animation
private _observed: ObservedObject | null;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions