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.

リンクされた Playground の例と JSX スニペットから始めて、現在の診断を再現します。これには、欠落している JSX.IntrinsicElements と React のエラーが含まれます。例が明確な factory-import 診断を生成するか、インポートを必要としなくなり、選択した動作が関連する compiler tests に反映されれば、作業は完了です。