Cannot read property 'getBoundingClientRect' of null

[webivan1]

Hi

I am catching this error when I resize the browser window

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null at Range._this.getOffsets (Range.js:52) at Range._this.onResize (Range.js:157) at utils.js:151

[tajo]

Can you create a repro with CodeSandbox?

[N1ades]

same problem

[vincaslt]

Same issue - I'm creating and removing these items quickly, it seems that getOffsets is called before trackElement is created or after it's already removed.

[tajo]

There was a change made that could fix this. Can you try it?

[cezarsmpio]

Hey, I'm also having this issue, my current version is ^1.8.3.

[shivamragnar]

Hey guys, any updates on this? I am still facing this issue in 1.8.14

[KorySchneider]

Seems that the trackRef ref is not getting set before componentDidMount is called. getOffsets is called inside componentDidMount and tries to call trackRef.current.getBoundingClientRect(), but the ref is still null.

The error can be avoided by adding this line to getOffsets:

if (!trackElement) return [];

Not sure if this might cause issues elsewhere, but from my minimal testing I did not notice anything. There is a similar check already in place in getThumbs, which would otherwise throw a similar error when trying to reference trackRef.current.children.

Related: https://stackoverflow.com/a/50019873

[KorySchneider]

@tajo I've created PR #182 with the change I mentioned.

I should note that I was only seeing this error when running snapshot tests with jest/storybook. With this change, I see the warnings but everything renders correctly, which is not ideal better than the tests blowing up 🤷

[bertuck]

Patch to apply via patch-package to resolve issue : (waiting for PR to be merged https://github.com/tajo/react-range/pull/182)

react-range+1.8.14.patch

diff --git a/node_modules/react-range/lib/Range.js b/node_modules/react-range/lib/Range.js
index 2403f9d..f276ec3 100644
--- a/node_modules/react-range/lib/Range.js
+++ b/node_modules/react-range/lib/Range.js
@@ -68,6 +68,10 @@ var Range = /** @class */ (function (_super) {
         _this.getOffsets = function () {
             var _a = _this.props, direction = _a.direction, values = _a.values, min = _a.min, max = _a.max;
             var trackElement = _this.trackRef.current;
+            if (!trackElement) {
+                console.warn('No track element found.');
+                return [];
+            }
             var trackRect = trackElement.getBoundingClientRect();
             var trackPadding = (0, utils_1.getPaddingAndBorder)(trackElement);
             return _this.getThumbs().map(function (thumb, index) {
@@ -523,7 +527,9 @@ var Range = /** @class */ (function (_super) {
         document.removeEventListener('touchstart', this.onMouseOrTouchStart);
         document.removeEventListener('mouseup', this.schdOnEnd);
         document.removeEventListener('touchend', this.schdOnEnd);
-        this.resizeObserver.unobserve(this.trackRef.current);
+        if (this.trackRef && this.trackRef.current) {
+            this.resizeObserver.unobserve(this.trackRef.current);
+        }
     };
     Range.prototype.render = function () {
         var _this = this;