react-preloader-icon with redux

Question

I'm new to react/redux and trying to use this preloader lib with react/redux: https://github.com/UYEONG/react-preloader-icon

I get this error in browser console when trying to use it:

Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded...

I use it in a container component Books' render method...

Why am I getting this error?
What does it mean?

What is the correct way of using the preloader component?

class Books extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.redirectToAddBookPage = this.redirectToAddBookPage.bind(this);
  }

  createBookRow(book, index) {
    return <div key={index}>{ book.title }</div>;
  }

  redirectToAddBookPage() {
    browserHistory.push('/book');
  }

  render() {
    const {books} = this.props;
    return (
      <div>
        <h1>Books</h1>
        <input type="submit"
               value="Add new book"
               className="btn btn-primary"
               onClick={this.redirectToAddBookPage}/>

        <PreloaderIcon
          type={ICON_TYPE.OVAL}
          size={32}
          strokeWidth={3}
          strokeColor="#F0AD4E"
          duration={800}
        />

        <BookList books={books}/>
      </div>
    );
  }

}

Books.propTypes = {
  books: PropTypes.array.isRequired,
};

function mapStateToProps(state, ownProps) {
  return {
    books: state.books
  };
}

export default connect(mapStateToProps)(Books);

score 1 · Answer 1 · answered Mar 13 '17 at 15:37

1

As the docs state this would occur if you are adding a ref an element outside the render method. or it could occur if you have multiple copies of react present. perhaps try running

rm -rf node_modules && npm install

answered Mar 13 '17 at 15:37

Isaac Osiemo

116
1
9

score 0 · Accepted Answer · edited May 23 '17 at 11:46

0

I was loading react multiple times so state was shared between multiple instances of react... I solved it by adding this to my webpack.config.js file, forcing the app to only use the 'primary' dependency from node_modules/react folder:

resolve: {
  alias: {
    'react': path.join(__dirname, 'node_modules', 'react')
  }
}

react-preloader-icon with redux

2 Answers2