microsoft / microsoft/TypeScript

Improve error message if JSX factory function is not imported

Offen
#44,618 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Experience Enhancement Suggestion
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:

  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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Ö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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.