Meteor + React Error Element type is invalid: expected a string (for built-in components)

Question

I simplified my code for this question

My project has these two files:

Comments.jsx

Comments = React.createClass({
  render() {
    return (
      <div className="container">
        Hello Comments
      </div>
    );
  }
});

App.jsx

App = React.createClass({

  renderComments() {
    return <Comments />;
  },
  render() {
    return (
      <div>
      {this.renderComments()}
      </div>
    );
  }
});

When I run the project, I get the error below:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of App

Exception in callback of async function: Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of App.

If I remove {this.renderComments()} from App.jsx render() jsx mark up everything works again.

What did I do wrong? Why can't I embed a <Comments /> ?

---

Additional info

Ok this is really weird. If I rename all instances of Comments to Commnt, comments to commnts, and rename the file Comments.jsx to Commnt.jsx, then everything works!!!. I tried renaming it to anything else it works. I only get this error when I use the word Comments. I have to start driving, so i'll look up later if Comments is a reserved word or something.

I don't have any other files in my meteorjs project other than an html file and a myhelloworld.jsx which has 2 url routes. So I'm prety sure I know for a fact i didn't use Comments anywhere else.

Answer 1

I had this in my mainproject.jsx of my meteor project Comments = new Mongo.Collection("comments"); . So this caused a naming conflict because meteor pushes this variable to both the server and client.