getCroppingRect returning NaN

[HPieters]

Hello All, I am facing some issue whilst updating my stack (React 18, moving from CRA to Vite). Somehow I don't get consistent results from react-avatar-editor anymore. The editor ref or canvas doesn't seem to return any data. I have found a solution (for now) for myself, but this includes a hacky setTimeout to move the getImage() to be executed as last when there is an image.

You can find a bare minimum codesandbox example (not my production example, but minimum broken) which is just the example from the README.

Codesandbox: https://codesandbox.io/s/react-avatar-editor-nan-issue-xn4dl9?file=/src/Editor.tsx:792-807

If your press the button "Broken Save" you will see in the console:

Result of getCroppingRect:

{x: NaN, y: NaN, width: NaN, height: NaN}

Error thrown by getImage()

TypeError: Cannot read properties of undefined (reading 'width')

If anyone can point me in the right direction that would be great, I might have time myself at some stage to dive into the source and find the issue myself.

[dan-lee]

Hey @HPieters 👋

Hmm, not sure if I understand correctly, but the problem seems to be related when the image does not exist. In this forked sandbox with an existing image it looks like it works.

[HPieters]

Thank you for your reply @dan-lee 👋

Ah okey, so maybe that is my issue, it's a bit hard since I am working with lots of different components in a single place to figure out the issue. In production I use dropzone, but I will try to remake this in the codesandbox.

Would it be a good idea to throw an error or return nothing rather than crash (with no image)?