CODEWITHSUNDEEP
reactjscss-transitions
Stephen Corwin
Stephen Corwin

Reputation: 1007

React css transition throwing invalid component error

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 :(

Upvotes: 1

Views: 676

Answers (1)

Stephen Corwin
Stephen Corwin

Reputation: 1007

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!

Upvotes: 1

Related Questions