Cannot read property 'getBoundingClientRect' of null

My entire app is this:

import React from 'react'
import ReactDOM from 'react-dom'
import Photo from '../components/photo'
import {createClient} from 'contentful'
import ScrollableAnchor from 'react-scrollable-anchor'

// import { configureAnchors } from 'react-scrollable-anchor'

// Offset all anchors by -60 to account for a fixed header
// and scroll more quickly than the default 400ms
// configureAnchors({offset: -60, scrollDuration: 200, keepLastAnchorHash: true})


const client = createClient({
  space: '[redacted]',
  accessToken: '[redacted]'
})


const App = ({assets}) => {
  return (
    <div className="list">
      {
        assets.map(asset =>
          <ScrollableAnchor id={asset.fields.id}>
            <div style={{height: '1000px'}}>test</div>
            {/* <Photo photo={asset}  /> */}
          </ScrollableAnchor>
        )
      }
    </div>
  );
};
  

document.addEventListener('DOMContentLoaded', () => {
  client.getAssets()
  .then((response) => ReactDOM.render(<App assets={response.items}/>, document.getElementById('app')))
  .catch(console.error)
})

I get this error after a scroll stops:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at getElementOffset (scroll.js:14)
    at doesElementContainScrollTop (scroll.js:29)
    at scroll.js:88
    at Array.forEach (<anonymous>)
    at getBestAnchorGivenScrollLocation (scroll.js:86)
    at Manager.handleScroll (Manager.js:76)
    at later (func.js:15)
getElementOffset @ scroll.js:14
doesElementContainScrollTop @ scroll.js:29
(anonymous) @ scroll.js:88
getBestAnchorGivenScrollLocation @ scroll.js:86
Manager.handleScroll @ Manager.js:76
later @ func.js:15
setTimeout (async)
(anonymous) @ func.js:20

(context: I just want something that changes the URL of the page to have a fragment corresponding with whatever picture is currently in the viewport, so that if the link is shared, the browser will scroll to that specific picture. Shouldn’t be hard, right?)

[TrebuhD]

I’m having the same problem. I tried wrapping my components in <div>s and converting them to stateless components, nothing works.

Edit: I managed to solve it - in my case it was caused by a child of <ScrollableAnchor /> being null.

[moritzmock]

@TrebuhD thx for the hint, I used a React.Fragment:

<ScrollableAnchor id="contact">
   <>
      {"CONTACT"}
   </>
</ScrollableAnchor>

After I changed them to a <div> all worked fine!