Description
onImageLoaded is first called with undefined when the ReactCrop component is initially rendered with a src value, seemingly when rebuilt with Webpack. It's fairly consistent in Firefox, only seems to happen sometimes in Chrome.
Test case here: https://codesandbox.io/s/lo9no1mkm.
- Turn OFF Preview On Edit in codesandbox.io settings.
- Open browser console
- Comment out or uncomment the final line (
render('');) inindex.js, and save (which rebuilds). - Select image with file input
The codesandbox.io output will show the React POV with a cross origin error due to the top level event being an image input event, but in the console you can see either "image is undefined` in Firefox or Chrome complain about accessing properties of undefined.
I'm not entirely certain about the possible cases. In a project I am working on which uses webpack-dev-server (not CRA), it always calls onImageLoaded with undefined in Firefox unless rendered with a blank value first.
I don't have any particularly good guesses about the cause, but I am wondering if perhaps there is an odd interaction happening which involves webpack-dev-server.
-EDIT-
There is a very simple workaround for this, which is to simply add if (!image) { return; } to the top of your onImageLoaded handler.