Uncaught TypeError: this.refs.el.getBoundingClientRect is not a function

[craig1123]

This error comes from line 145:
getBoundingClientRect() { return this.refs.el.getBoundingClientRect(); }

[masylum]

I'm also getting the same error. When you initialize the component update gets called and then it bubbles down to getBoundingClientRect. Since the component has not rendered yet it does not have the references in place yet.

[masylum]

the problem is that the this.refs.el was pointing to a React element instead of a DOM node.
I fixed this wrapping the child on a <div>:

<Sticky debug>
  <div>
    <YearlyCalendar dateTree={{}} />
  </div>
</Sticky>

[soenkekluth]

@craig1123 @masylum version 2.1.4 was just published. the problem should be solved. if you update be shure to test if everything else works - and it should better ;)

[dagatsoin]

I use @2.1.5 with [email protected] and have also this error:

TypeError: this.refs.el.getBoundingClientRect is not a function
    at ReactStickyState.getBoundingClientRect (react-sticky-state.js:154)
    at ReactStickyState.getBounds (react-sticky-state.js:159)
    at ReactStickyState.updateBounds (react-sticky-state.js:251)
    at ReactStickyState.update (react-sticky-state.js:408)
    at ReactStickyState.eval (react-sticky-state.js:533)
    at CallbackQueue.notifyAll (CallbackQueue.js:76)
    at ReactUpdatesFlushTransaction.close (ReactUpdates.js:59)
    at ReactUpdatesFlushTransaction.closeAll (Transaction.js:206)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:153)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)

My component:

import React from 'react';
import injectSheet from 'react-jss';

import style from '../theme/splitView';

import Section from '../4-layouts/Section';
import View from '../0-atoms/View';
import Sticky from 'react-sticky-state';

const SplitView = ({sheet:{classes}, renderTop, renderMiddle, renderBottom}) =>
  <View className={classes.wzSplitView}>
    <Section className="top">{renderTop()}</Section>
    <Sticky>
      <View className="handleBar">{renderMiddle()}</View>
    </Sticky>
    <Section className="bottom" secondary>{renderBottom()}</Section>
  </View>;

export default injectSheet(style)(SplitView);

Wrapping in a div also fixes this. But is it an excepted behavior?

<Sticky>
  <div>      
    <View className="handleBar">{renderMiddle()}</View>
  </div
</Sticky>

[hoschi]

I have the same error :(
Even with very simple content <Sticky>foo</Sticky>. As @dagatsoin said, wrapping it in a div 'fixes' it.

[stevengrimaldo]

Am I to assume since this was posted on Nov 15, 2016 it will not be fixed, since it's been about 3 years?

[bbu23]

the problem is that the this.refs.el was pointing to a React element instead of a DOM node.
I fixed this wrapping the child on a <div>:

<Sticky debug>
  <div>
    <YearlyCalendar dateTree={{}} />
  </div>
</Sticky>

Thank you for saving the life of a php developer who's working on a ReactJs project. Bless your soul!