react-sticky: Cannot read property 'getBoundingClientRect' of undefined

No longer relevant with 6.x

I know this is an old issue but I was wondering if anyone actually got this to work? We’re using react@16.2.0 and I just can’t get it to work, even if I set everything up just like the examples. The <Stick /> just stays where it is and the TypeError: Cannot read property 'getBoundingClientRect' of undefined error pops up for every invocation.

Any help is much appreciated 😃

Edit: I also get this:

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Sticky`.

I see a few problems off the bat @gregoralbrecht, here’s a working sandbox https://codesandbox.io/s/9op7mw8v4y

One of the problems is what the warning is telling you. Stateless function components cannot be given refs, so when Sticky tries to get a ref of the rendered component to measure, it ends up with undefined, ultimately giving you the error on this issue. You can fix that by using a class component.

Another problem is that you’re not taking in the style argument from the Sticky callback, which is the mechanism used to actually make the component stay where it is. The callback needs to be ({ style }) => at the bare minimum to work, and your ActionBar component needs to pass the style prop to the actual DOM.

I’ve also just run into the same issue, using the most simple Sticky example. I’ve created a dedicated branch for anyone who wants to dive in at https://github.com/Vadorequest/chatounerie-du-luberon/tree/sticky-issue

Run npm install then npm start

Incriminated file is https://github.com/Vadorequest/chatounerie-du-luberon/blob/sticky-issue/src/components/Navbar.js#L26

Hope it helps.

I had the same issue. I’m not sure why, but it got solved when I wrapped inside of my Sticky element with a div tag. I turned this: <Sticky>{({style}) => <Image style={style} width="256" height="256" src="/assets/icon/windows.svg" alt="Windows"/> }</Sticky> To this: <Sticky>{({style}) => <div style={style}> <Image width="256" height="256" src="/assets/icon/windows.svg" alt="Windows"/> </div> }</Sticky>

I didn’t get the Stateless function components cannot be given refs warning, but it was the problem in my case. Thanks @vcarl.

I was able to git bisect and find where this issue was introduced. It turns out that for us it was caused by the New Relic Browser agent. Based on your explanation of what would cause this error to be thrown, I might guess that the NR Browser agents futzes with the DOM elements that the components hold a ref to or the events on window.

Removing NR Browser immediately cleared the issue, so anyone else experiencing this issue should try the same.

@SpainTrain The source isn’t too bad; I recommend taking a look!

Having said that, the places that call getBoundingClientRect() are all directly or indirectly called by Sticky.recomputeState. That method is called whenever the props are updated (via componentWillReceiveProps) and via event handlers on window (which are attached in componentDidMount and unattached in componentWillUnmount).

The things that would me most useful in diagnosing this error would be a) evidence that getBoundingClientRect is being called from outside one of those two source (which would be an easy fix!), or b) a scenario where recomputeState is being called after the component has unmounted.