microsoft / microsoft/TypeScript
Improve error message if JSX factory function is not imported
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- Go
- Sterne
- 111k
- Forks
- 14.4k
- Ø Merge
- 1 T. 19 Std.
- Gemergte PRs (30 T.)
- 117
Beschreibung
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:
- Improve the error message, e.g. "JSX requires importing a factory function (configured as
React.createElementin this project) but that import is not present in this file." - 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.
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit dem verlinkten Playground-Beispiel und dem JSX-Snippet, um die aktuellen Diagnosen zu reproduzieren, einschließlich der fehlenden JSX.IntrinsicElements- und React-Fehler. Die Arbeit ist abgeschlossen, wenn das Beispiel einen eindeutigen factory-import-Diagnosehinweis erzeugt oder den Import nicht mehr benötigt und das gewählte Verhalten in den relevanten compiler tests widergespiegelt wird.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- compilers
- Issue-Typ
- Bug
- Schwierigkeit
- 5/5
- Geschätzter Aufwand
- Über eine Woche
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 28/100