Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

[stevenmusumeche]

Version

2.2.1

Test Case

http://jsbin.com/sacerobuxi/edit?html,js,output

Steps to reproduce

Unsure but it happens in production (rarely)

Expected Behavior

No uncaught errors

Actual Behavior

Line 76: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

        innerWidth = _window.innerWidth,
        innerHeight = _window.innerHeight;
        var rect = _this.menu.getBoundingClientRect(); // <-- error on this line
        var menuStyles = {
            top: y,
            left: x

[vkbansal]

It would be helpful if I can get steps to reproduce.

[stevenmusumeche]

Yea, totally understand, I can't reproduce it either but our error tracking is finding it in the wild. I noticed a similar error which happens in the same file because _this.menu is null.

[vkbansal]

OK. I'll take a stab at it over the weekend.

[skipjack]

I'm seeing this as well:

Which stems from line 147 in ContextMenu.js. It's line 58 that triggers this though -- I think the window.requestAnimationFrame || setTimeout is causing it to be called after the component has unmounted in certain scenarios.

It's inconsistent for me as well though I am able to reproduce it consistently when changing urls via react-router. I don't have time to throw together an example at the moment but I'm pretty sure what I described above is the cause.

[skipjack]

Also seeing the following from the same block of code:

Which seems to be caused by trying to read styles after the component has unmounted.

[vkbansal]

Which browser are you guys seeing this on?

[skipjack]

Chrome for me.

[stevenmusumeche]

Latest Chrome for me as well.

[vkbansal]

Released a patch for this. Please open issues if you find such errors in future.

[skipjack]

Tested and confirmed the fix, thanks @vkbansal!

[stevenmusumeche]

same here, thanks so much @vkbansal you rock