Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

[brunosantanarj]

When I use react-range inside styled-component I get this error

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
at Range._this.onMove (Range.js:198)
at Range._this.onMouseMove (Range.js:160)
at utils.js:102

[tajo]

Hey, can you provide the full example?

[mariothedev]

`
import { Range } from 'react-range';

<Range
step={0.1}
min={0}
max={100}
values={[10, 14]}
renderTrack={({ children }) => (
<div
style={{
height: '6px',
width: '100%',
backgroundColor: '#ccc'
}}
>
{children}

)}
renderThumb={() => (
<div
style={{
height: '42px',
width: '42px',
backgroundColor: '#999'
}}
/>
)}
/>`

[tajo]

You need to spread over some props over your divs. They are being passed through in renderTrack / renderThumb. Check the examples.

[elderapo]

I am experiencing the same error:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at Range._this.getOffsets (Range.js:42)
    at Range._this.onResize (Range.js:134)
    at utils.js:131

happens when native prop gets changed.

[tajo]

happens when native prop gets changed.

What is native prop? Can you please provide a full example?

[elderapo]

Actually this is a little bit awkward... I confused 2 libraries: react-range and react-custom-scrollbars. 🤭

Nonetheless react-custom-scrollbars seems to break react-range under some circumstances... Unfortunately, I didn't manage to create a small reproducible repo but I figured out this happens when changing native prop in react-custom-scrollbars which I guess ends up unmounting all the children and them mounts them again. This seems to cause react-range to lose ref (trackRef) and throw this error on first render (?) after unmount/mount.

_this.getOffsets = function () {
            var _a = _this.props, direction = _a.direction, values = _a.values, min = _a.min, max = _a.max;
            var trackElement = _this.trackRef.current;
            var trackRect = trackElement.getBoundingClientRect(); <-------------------
            var trackPadding = utils_1.getPaddingAndBorder(trackElement);

I am not familiar at all with react-range but does my theory make sense? If you want I could privately send you a link to my app with source maps enabled so you could debug it further.

@edit:

Just checked and it's a call to getOffsets from onResize that's causing this.