Better error message for void-returning functions used as JSX elements

[JoshuaKGoldberg]

Search Terms

JSX element type 'void' is not a constructor function for JSX elements

Suggestion

The above search terms are the error message you get when you use a function that returns void for a JSX lambda. That's rather cryptic and doesn't give much info about the actual issue. Can we have something prettier?

Taking a rough stab at it:

{component name} renders type 'void', which is not valid for JSX elements

Alternately, maybe an additional help line after this error?

JSX element type 'void' is not a constructor function for JSX elements
    {component name} renders type 'void' instead of a valid JSX child

Use Cases

It's common to accidentally forget to return in a JSX element. { and } are visually similar to ( and ).

Examples

const Component = () => {
    // return "hi!";
};

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

[MhdTlb]

Can someone guide me on this one?