Improve error message if JSX factory function is not imported

Bug Report

A colleague who is new to JSX recently wrote code equivalent to <div></div> (Playground link) and got this confusing error:

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
Cannot find name 'React'.

But from my colleague's perspective, why would TypeScript be looking for "name 'React'"? It is not obvious from reading the code that it compiles to React.createElement('div') and that this requires an import.

I can imagine two possible solutions:

1. Improve the error message, e.g. "JSX requires importing a factory function (configured as React.createElement in this project) but that import is not present in this file."
2. Make the import unnecessary, e.g. introduce a new option to tell the compiler how to automatically add an import for the factory function if it's needed.

This is different than, but in the same general category as, other issues about JSX error messages like #42955 and #42794. I suspect this issue might not get enough priority to be addressed on its own, but maybe it could in the context of a small effort to improve JSX error messages in general.

🔎 Search Terms

JSX error message

🕗 Version & Regression Information

As far as I know, this has always happened. It at least happens in TS 4.3.

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about JSX.

⏯ Playground Link

Playground link with relevant code

💻 Code

<div></div>

🙁 Actual behavior

Received confusing error message described above.

🙂 Expected behavior

Received clear error message or no error.

Start with the linked Playground example and the JSX snippet to reproduce the current diagnostics, including the missing JSX.IntrinsicElements and React errors. The work is done when the example produces a clear factory-import diagnostic or no longer requires the import, with the chosen behavior reflected in relevant compiler tests.