improve the error message for generic arrow in tsx

Author: evanw

internal/js_lexer/js_lexer.go

@@ -253,6 +253,7 @@ type Lexer struct {
 	JSXFactoryPragmaComment  logger.Span
 	JSXFragmentPragmaComment logger.Span
 	SourceMappingURL         logger.Span
+	BadArrowInTSXSuggestion  string
 
 	// Escape sequences in string literals are decoded lazily because they are
 	// not interpreted inside tagged templates, and tagged templates can contain
@@ -270,6 +271,8 @@ type Lexer struct {
 	start                           int
 	end                             int
 	ApproximateNewlineCount         int
+	CouldBeBadArrowInTSX            int
+	BadArrowInTSXRange              logger.Range
 	LegacyOctalLoc                  logger.Loc
 	AwaitKeywordLoc                 logger.Loc
 	FnOrArrowStartLoc               logger.Loc
@@ -945,23 +948,36 @@ func (lexer *Lexer) NextJSXElementChild() {
 					} else {
 						replacement = "{'>'}"
 					}
-					msg := logger.Msg{Kind: logger.Error, Data: lexer.tracker.MsgData(logger.Range{Loc: logger.Loc{Start: int32(lexer.end)}, Len: 1},
-						fmt.Sprintf("The character \"%c\" is not valid inside a JSX element", lexer.codePoint)),
-						Notes: []logger.MsgData{{Text: fmt.Sprintf("Did you mean to escape it as %q instead?", replacement)}}}
-					msg.Data.Location.Suggestion = replacement
-					if !lexer.ts.Parse {
-						// TypeScript treats this as an error but Babel doesn't treat this
-						// as an error yet, so allow this in JS for now. Babel version 8
-						// was supposed to be released in 2021 but was never released. If
-						// it's released in the future, this can be changed to an error too.
-						//
-						// More context:
-						// * TypeScript change: https://github.com/microsoft/TypeScript/issues/36341
-						// * Babel 8 change: https://github.com/babel/babel/issues/11042
-						// * Babel 8 release: https://github.com/babel/babel/issues/10746
-						//
-						msg.Kind = logger.Warning
+					msg := logger.Msg{
+						Kind: logger.Error,
+						Data: lexer.tracker.MsgData(logger.Range{Loc: logger.Loc{Start: int32(lexer.end)}, Len: 1},
+							fmt.Sprintf("The character \"%c\" is not valid inside a JSX element", lexer.codePoint)),
 					}
+
+					// Attempt to provide a better error message if this looks like an arrow function
+					if lexer.CouldBeBadArrowInTSX > 0 && lexer.codePoint == '>' && lexer.source.Contents[lexer.end-1] == '=' {
+						msg.Notes = []logger.MsgData{lexer.tracker.MsgData(lexer.BadArrowInTSXRange,
+							"TypeScript's TSX syntax interprets arrow functions with a single generic type parameter as an opening JSX element. "+
+								"If you want it to be interpreted as an arrow function instead, you need to add a trailing comma after the type parameter to disambiguate:")}
+						msg.Notes[0].Location.Suggestion = lexer.BadArrowInTSXSuggestion
+					} else {
+						msg.Notes = []logger.MsgData{{Text: fmt.Sprintf("Did you mean to escape it as %q instead?", replacement)}}
+						msg.Data.Location.Suggestion = replacement
+						if !lexer.ts.Parse {
+							// TypeScript treats this as an error but Babel doesn't treat this
+							// as an error yet, so allow this in JS for now. Babel version 8
+							// was supposed to be released in 2021 but was never released. If
+							// it's released in the future, this can be changed to an error too.
+							//
+							// More context:
+							// * TypeScript change: https://github.com/microsoft/TypeScript/issues/36341
+							// * Babel 8 change: https://github.com/babel/babel/issues/11042
+							// * Babel 8 release: https://github.com/babel/babel/issues/10746
+							//
+							msg.Kind = logger.Warning
+						}
+					}
+
 					lexer.log.AddMsg(msg)
 					lexer.step()
 

internal/js_parser/js_parser.go

@@ -4597,6 +4597,24 @@ func (p *parser) parseJSXElement(loc logger.Loc) js_ast.Expr {
 		}}
 	}
 
+	// Attempt to provide a better error message for people incorrectly trying to
+	// use arrow functions in TSX (which doesn't work because they are JSX elements)
+	if p.options.ts.Parse && len(properties) == 0 && startText != "" && p.lexer.Token == js_lexer.TGreaterThan &&
+		strings.HasPrefix(p.source.Contents[p.lexer.Loc().Start:], ">(") {
+		badArrowInTSXRange := p.lexer.BadArrowInTSXRange
+		badArrowInTSXSuggestion := p.lexer.BadArrowInTSXSuggestion
+
+		p.lexer.CouldBeBadArrowInTSX++
+		p.lexer.BadArrowInTSXRange = logger.Range{Loc: loc, Len: p.lexer.Range().End() - loc.Start}
+		p.lexer.BadArrowInTSXSuggestion = fmt.Sprintf("<%s,>", startText)
+
+		defer func() {
+			p.lexer.CouldBeBadArrowInTSX--
+			p.lexer.BadArrowInTSXRange = badArrowInTSXRange
+			p.lexer.BadArrowInTSXSuggestion = badArrowInTSXSuggestion
+		}()
+	}
+
 	// Use ExpectJSXElementChild() so we parse child strings
 	p.lexer.ExpectJSXElementChild(js_lexer.TGreaterThan)
 

internal/js_parser/ts_parser_test.go

@@ -2292,7 +2292,11 @@ func TestTSJSX(t *testing.T) {
 	expectPrintedTS(t, "const x = <[]>(y, z) => {}", "const x = (y, z) => {\n};\n")
 
 	invalid := "<stdin>: ERROR: The character \">\" is not valid inside a JSX element\nNOTE: Did you mean to escape it as \"{'>'}\" instead?\n"
-	expectParseErrorTSX(t, "(<T>(y) => {}</T>)", invalid)
+	invalidWithHint := "<stdin>: ERROR: The character \">\" is not valid inside a JSX element\n<stdin>: NOTE: TypeScript's TSX syntax interprets " +
+		"arrow functions with a single generic type parameter as an opening JSX element. If you want it to be interpreted as an arrow function instead, " +
+		"you need to add a trailing comma after the type parameter to disambiguate:\n"
+	expectParseErrorTSX(t, "(<T>(y) => {}</T>)", invalidWithHint)
+	expectParseErrorTSX(t, "(<T>(x: X<Y>) => {}</Y></T>)", invalidWithHint)
 	expectParseErrorTSX(t, "(<T extends>(y) => {}</T>)", invalid)
 	expectParseErrorTSX(t, "(<T extends={false}>(y) => {}</T>)", invalid)
 	expectPrintedTSX(t, "(<T = X>(y) => {})", "(y) => {\n};\n")
@@ -2301,7 +2305,9 @@ func TestTSJSX(t *testing.T) {
 	expectPrintedTSX(t, "(<T,>() => {})", "() => {\n};\n")
 	expectPrintedTSX(t, "(<T, X>(y) => {})", "(y) => {\n};\n")
 	expectPrintedTSX(t, "(<T, X>(y): (() => {}) => {})", "(y) => {\n};\n")
-	expectParseErrorTSX(t, "(<T>() => {})", invalid+"<stdin>: ERROR: Unexpected end of file\n")
+	expectParseErrorTSX(t, "(<T>() => {})", invalidWithHint+"<stdin>: ERROR: Unexpected end of file\n")
+	expectParseErrorTSX(t, "(<T>(x: X<Y>) => {})", invalidWithHint+"<stdin>: ERROR: Unexpected end of file\n")
+	expectParseErrorTSX(t, "(<T>(x: X<Y>) => {})</Y>", invalidWithHint+"<stdin>: ERROR: Unexpected end of file\n")
 	expectParseErrorTSX(t, "(<[]>(y))", "<stdin>: ERROR: Expected identifier but found \"[\"\n")
 	expectParseErrorTSX(t, "(<T[]>(y))", "<stdin>: ERROR: Expected \">\" but found \"[\"\n")
 	expectParseErrorTSX(t, "(<T = X>(y))", "<stdin>: ERROR: Expected \"=>\" but found \")\"\n")