[Feature request] Improved suggestion for invalid element type

[nycdotnet]

This is a feature request.

Current behavior:
If ReactDOM.render() is called using a component name that is declared later in the same file, the resulting error suggests that the component wasn't exported from the file it was defined in.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Example code where the suggestion is inappropriate:

var mountNode = document.getElementById("mountNode");
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);

// oops!!!
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

What is the expected behavior?
The suggestion does not help in this instance. It would be helpful if the error message also suggested that ReactDOM.render() may have been called too early. For example:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you tried to render the component before it was declared in the current file.

I am an experienced ES6+ developer, but new to React. I just finished the tic-tac-toe tutorial and was attempting to apply what I had learned to one of my web sites when I made the above mistake. Since this mistake is plausible to be made by someone just getting started (especially if they are taking the tutorial code as their starting point, and are new to ES6+), it would be useful to suggest the alternate possible fix. It might help other beginners out there.

If this is OK, I'll send a PR ASAP. Thank you for your consideration.

This is on the latest version of React and should affect all environments. Thank you.

[aweary]

Thanks for the issue @nycdotnet! Welcome to the React community ⚛️ That's definitely one scenario where the warning may not be as helpful. But since there's usually only a single ReactDOM.render call in an application and it's essentially a community standard to call ReactDOM.render at the bottom of your entry file, I think that >99% of the time the current warning will suffice.

If we can verify that more new users experience this specific issue than we can definitely consider it, but as it stands I think this is an edge case that might distract from the most common case and confuse some new React developers.

Maybe ReactDOM.render should fail fast if the element's type is undefined? The current warning is a little confusing for this case since the top-level component is usually in the same file as the ReactDOM.render call. If we validate early we can throw a more descriptive error message specifically addressing this issue. @gaearon what do you think?

[nycdotnet]

Thanks for considering this.

[gaearon]

Seems like we haven't seen much confusion in this area so it's probably not worth spending extra doc or warning space on this (and thus confusing people who don't have this problem but have more common ones).

[nycdotnet]

Thank you for the consideration.