TypeError: Cannot read property 'appendChild' of null

[zamirkhan]

This exception is happening inside image.js and I'm wondering if it's due to the fact that my <Image> element is conditionally-rendered? The image does end up loading properly, but I do see this error in the console.

image.js:257 Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null
    at Image.<anonymous> (image.js:257)
    at step (image.js:151)
    at Object.next (image.js:81)
    at fulfilled (image.js:33) 

[hisuwh]

Are you sure this error is coming from our code? This library is just a react wrapper around blueimp-load-image and it looks to me like this error is coming from there

[ksstott]

it looks to me like this error is coming from there

What makes you think that? From what I can see there is no image.js file in the blueimp-load-image library but there is one in this package.

A quick glace at this I'd guess it was this line that is breaking; without reproducing and confirming I'd guess that this.container initially has a value when the renderImage is first called but when it continues after the await the this.container field no longer has a value.

[hisuwh]

Good spot @ksstott it was the line 257 that threw me.

[ksstott]

Yeah I don't know where those line numbers are coming from, I can't explain that.
Unless it's looked at beforehand I will take a proper look at this over Christmas and put a PR up for this so we handle this more gracefully.

[Jameskmonger]

@hisuwh may have been bundled

@ksstott I think that this should be converted to use createRef, it might help if the issue is that the ref is being unassigned

[zamirkhan]

Thank you to all for the quick responses. Not a showstopper at this point, but looking forward to a fix. I definitely prefer using this over using blueimp directly.

[Jameskmonger]

@zamirkhan Could you please provide a reproducible example of this?

[zamirkhan]

@Jameskmonger I would like to, but the low priority (it still works, just produces this error in the console) combined with the time it would take to boil this down from the large codebase it's currently happening in, mean it's something I don't think I can get to in the near future. I was sharing the bug more as an FYI rather than "please fix this asap" issue.

In the meantime, I will try to change some things within the current codebase, to see if I can at least find out what affects this behaviour (e.g. if it is indeed the conditional rendering) and report back if I learn something.

[ksstott]

Thanks for reporting this @zamirkhan I've tried to reproduce this this afternoon and have managed to reproduce it. It is indeed related to the conditional rendering. I've got an example here, to replicate I had to enable network throttling in DevTools and then show and hide the image in quick succession.
I'll get a PR for this soon and will push for something to be released in the new year.

[ksstott]

@ksstott I think that this should be converted to use createRef, it might help if the issue is that the ref is being unassigned

I looked into this and it sadly did not help; when I changed it to use createRef the .current property of the ref object was still null if the component was unloaded resulting in the same problem

[zamirkhan]

Thanks so much, @ksstott. When do you think this might make it into a new release?

[hisuwh]

@zamirkhan @ksstott lets try and get this out today

[hisuwh]

@zamirkhan this has been published now, thanks to @ksstott