React css transition throwing invalid component error

Question

Been struggling with this one for a few hours now. I'm trying to use react-css-transition-group to animate elements in an array. I have:

render: function(){
var dataSections = this.props.sections.map(this.buildDataSection);
return (
  <div>
    <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
      {dataSections}
    </ReactCSSTransitionGroup>
  </div>
);

}

It compiles fine, but when I run it I get Uncaught Error: Invariant Violation: ReactCSSTransitionGroup.render(): A valid ReactComponent must be returned. in my console. I have no idea why. I've tried rolling back my version of both react and react-css-transition-group to no avail. I'm at a loss for ideas at this point.

dataSections is a valid array of elements and renders fine when I take the animation out.

Any thoughts?

Update

I've since moved on to several other things in this project, and I've realized that it isn't just this package, it's any react package that exports a component. All of them throw this same error: A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

I've updated all my packages including Browserify, and React is already a peer dependency. Not sure what to do :(

Have you tried taking the ReactCSSTransitionGroup on top of the parent div and bring this div inside it, such that your top-most element becomes ReactCSSTransitionGroup? — Tahir Ahmed
– Tahir Ahmed, Commented Nov 25, 2015 at 4:16
Also, can you share what happens inside this buildDataSection of yours (might as well share the whole code)? — Tahir Ahmed
– Tahir Ahmed, Commented Nov 25, 2015 at 4:18
Making it the parent doesn't do anything, I still get the same error. Interestingly, I discovered that if I use the deprecated: var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; instead of requiring it with require('react-addons-css-transition-group') it works fine... — Stephen Corwin
– Stephen Corwin, Commented Nov 28, 2015 at 2:24

Stephen Corwin · Accepted Answer · 2015-12-01 23:41:22Z

1

Okay, I've figured it out, and I'm a fool.

Before I started using NPM, I was using the react-rails gem, and when I ported everything over to Browserify, I never took out the old gem. Because of that, I didn't notice the several different places that I forgot to require('react') at the top of a component file, because the old gem provided React in the global namespace and it therefor didn't throw an error.

Long story short, I had two conflicting versions of React running at the same time. Removed the gem, fixed the missing includes, and problems went away!

answered Dec 1, 2015 at 23:41

Stephen Corwin

1,0071 gold badge9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React css transition throwing invalid component error

Update

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related