warn about } and > inside JSX elements

Author: evanw

CHANGELOG.md

@@ -26,6 +26,39 @@
 
     There's a proposed [CSS syntax for nesting rules](https://drafts.csswg.org/css-nesting/) using the `&` selector, but it's not currently implemented in any browser. Previously esbuild silently passed the syntax through untransformed. With this release, esbuild will now warn when you use nesting syntax with a `--target=` setting that includes a browser.
 
+* Warn about `}` and `>` inside JSX elements
+
+    The `}` and `>` characters are invalid inside JSX elements according to [the JSX specification](https://facebook.github.io/jsx/) because they commonly result from typos like these that are hard to catch in code reviews:
+
+    ```jsx
+    function F() {
+      return <div>></div>;
+    }
+    function G() {
+      return <div>{1}}</div>;
+    }
+    ```
+
+    The TypeScript compiler already [treats this as an error](https://github.com/microsoft/TypeScript/issues/36341), so esbuild now treats this as an error in TypeScript files too. That looks like this:
+
+    ```
+    ✘ [ERROR] The character ">" is not valid inside a JSX element, but can be escaped as "{'>'}" instead
+
+        example.tsx:2:14:
+          2 │   return <div>></div>;
+            │               ^
+            ╵               {'>'}
+
+    ✘ [ERROR] The character "}" is not valid inside a JSX element, but can be escaped as "{'}'}" instead
+
+        example.tsx:5:17:
+          5 │   return <div>{1}}</div>;
+            │                  ^
+            ╵                  {'}'}
+    ```
+
+    Babel doesn't yet treat this as an error, so esbuild only warns about these characters in JavaScript files for now. Babel 8 [treats this as an error](https://github.com/babel/babel/issues/11042) but Babel 8 [hasn't been released yet](https://github.com/babel/babel/issues/10746). If you see this warning, I recommend fixing the invalid JSX syntax because it will become an error in the future.
+
 ## 0.14.11
 
 * Fix a bug with enum inlining ([#1903](https://github.com/evanw/esbuild/issues/1903))

internal/js_lexer/js_lexer.go

@@ -20,6 +20,7 @@ import (
 	"unicode"
 	"unicode/utf8"
 
+	"github.com/evanw/esbuild/internal/config"
 	"github.com/evanw/esbuild/internal/helpers"
 	"github.com/evanw/esbuild/internal/js_ast"
 	"github.com/evanw/esbuild/internal/logger"
@@ -250,6 +251,7 @@ type Lexer struct {
 	prevErrorLoc                    logger.Loc
 	json                            json
 	Token                           T
+	ts                              config.TSOptions
 	HasNewlineBefore                bool
 	HasPureCommentBefore            bool
 	PreserveAllCommentsBefore       bool
@@ -264,13 +266,14 @@ type Lexer struct {
 
 type LexerPanic struct{}
 
-func NewLexer(log logger.Log, source logger.Source) Lexer {
+func NewLexer(log logger.Log, source logger.Source, ts config.TSOptions) Lexer {
 	lexer := Lexer{
 		log:               log,
 		source:            source,
 		tracker:           logger.MakeLineColumnTracker(&source),
 		prevErrorLoc:      logger.Loc{Start: -1},
 		FnOrArrowStartLoc: logger.Loc{Start: -1},
+		ts:                ts,
 	}
 	lexer.step()
 	lexer.Next()
@@ -898,6 +901,37 @@ func (lexer *Lexer) NextJSXElementChild() {
 					// Stop when the string ends
 					break stringLiteral
 
+				case '}', '>':
+					// These technically aren't valid JSX: https://facebook.github.io/jsx/
+					//
+					//   JSXTextCharacter :
+					//     * SourceCharacter but not one of {, <, > or }
+					//
+					var replacement string
+					if lexer.codePoint == '}' {
+						replacement = "{'}'}"
+					} 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, but can be escaped as %q instead", lexer.codePoint, 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()
+
 				default:
 					// Non-ASCII strings need the slow path
 					if lexer.codePoint >= 0x80 {

internal/js_lexer/js_lexer_test.go

@@ -7,6 +7,7 @@ import (
 	"testing"
 	"unicode/utf8"
 
+	"github.com/evanw/esbuild/internal/config"
 	"github.com/evanw/esbuild/internal/logger"
 	"github.com/evanw/esbuild/internal/test"
 )
@@ -32,7 +33,7 @@ func assertEqualStrings(t *testing.T, a string, b string) {
 
 func lexToken(t *testing.T, contents string) T {
 	log := logger.NewDeferLog(logger.DeferLogNoVerboseOrDebug)
-	lexer := NewLexer(log, test.SourceForTest(contents))
+	lexer := NewLexer(log, test.SourceForTest(contents), config.TSOptions{})
 	return lexer.Token
 }
 
@@ -48,7 +49,7 @@ func expectLexerError(t *testing.T, contents string, expected string) {
 					panic(r)
 				}
 			}()
-			NewLexer(log, test.SourceForTest(contents))
+			NewLexer(log, test.SourceForTest(contents), config.TSOptions{})
 		}()
 		msgs := log.Done()
 		text := ""
@@ -78,7 +79,7 @@ func expectHashbang(t *testing.T, contents string, expected string) {
 					panic(r)
 				}
 			}()
-			return NewLexer(log, test.SourceForTest(contents))
+			return NewLexer(log, test.SourceForTest(contents), config.TSOptions{})
 		}()
 		msgs := log.Done()
 		test.AssertEqual(t, len(msgs), 0)
@@ -106,7 +107,7 @@ func expectIdentifier(t *testing.T, contents string, expected string) {
 					panic(r)
 				}
 			}()
-			return NewLexer(log, test.SourceForTest(contents))
+			return NewLexer(log, test.SourceForTest(contents), config.TSOptions{})
 		}()
 		msgs := log.Done()
 		test.AssertEqual(t, len(msgs), 0)
@@ -145,7 +146,7 @@ func expectNumber(t *testing.T, contents string, expected float64) {
 					panic(r)
 				}
 			}()
-			return NewLexer(log, test.SourceForTest(contents))
+			return NewLexer(log, test.SourceForTest(contents), config.TSOptions{})
 		}()
 		msgs := log.Done()
 		test.AssertEqual(t, len(msgs), 0)
@@ -352,7 +353,7 @@ func expectBigInteger(t *testing.T, contents string, expected string) {
 					panic(r)
 				}
 			}()
-			return NewLexer(log, test.SourceForTest(contents))
+			return NewLexer(log, test.SourceForTest(contents), config.TSOptions{})
 		}()
 		msgs := log.Done()
 		test.AssertEqual(t, len(msgs), 0)
@@ -407,7 +408,7 @@ func expectString(t *testing.T, contents string, expected string) {
 					panic(r)
 				}
 			}()
-			return NewLexer(log, test.SourceForTest(contents))
+			return NewLexer(log, test.SourceForTest(contents), config.TSOptions{})
 		}()
 		text := lexer.StringLiteral()
 		msgs := log.Done()
@@ -429,7 +430,7 @@ func expectLexerErrorString(t *testing.T, contents string, expected string) {
 					panic(r)
 				}
 			}()
-			lexer := NewLexer(log, test.SourceForTest(contents))
+			lexer := NewLexer(log, test.SourceForTest(contents), config.TSOptions{})
 			lexer.StringLiteral()
 		}()
 		msgs := log.Done()

internal/js_parser/js_parser.go

@@ -14601,7 +14601,7 @@ func Parse(log logger.Log, source logger.Source, options Options) (result js_ast
 		options.unsupportedJSFeatures |= options.tsTarget.UnsupportedJSFeatures
 	}
 
-	p := newParser(log, source, js_lexer.NewLexer(log, source), &options)
+	p := newParser(log, source, js_lexer.NewLexer(log, source, options.ts), &options)
 
 	// Consume a leading hashbang comment
 	hashbang := ""

internal/js_parser/js_parser_test.go

@@ -4242,6 +4242,11 @@ func TestNewTarget(t *testing.T) {
 }
 
 func TestJSX(t *testing.T) {
+	expectParseErrorJSX(t, "<div>></div>", "<stdin>: WARNING: The character \">\" is not valid inside a JSX element, but can be escaped as \"{'>'}\" instead\n")
+	expectParseErrorJSX(t, "<div>{1}}</div>", "<stdin>: WARNING: The character \"}\" is not valid inside a JSX element, but can be escaped as \"{'}'}\" instead\n")
+	expectPrintedJSX(t, "<div>></div>", "/* @__PURE__ */ React.createElement(\"div\", null, \">\");\n")
+	expectPrintedJSX(t, "<div>{1}}</div>", "/* @__PURE__ */ React.createElement(\"div\", null, 1, \"}\");\n")
+
 	expectParseError(t, "<a/>", "<stdin>: ERROR: The JSX syntax extension is not currently enabled\n"+
 		"NOTE: The esbuild loader for this file is currently set to \"js\" but it must be set to \"jsx\" to be able to parse JSX syntax. "+
 		"You can use 'Loader: map[string]api.Loader{\".js\": api.LoaderJSX}' to do that.\n")

internal/js_parser/ts_parser_test.go

@@ -1796,6 +1796,9 @@ func TestTSOptionalChain(t *testing.T) {
 }
 
 func TestTSJSX(t *testing.T) {
+	expectParseErrorTSX(t, "<div>></div>", "<stdin>: ERROR: The character \">\" is not valid inside a JSX element, but can be escaped as \"{'>'}\" instead\n")
+	expectParseErrorTSX(t, "<div>{1}}</div>", "<stdin>: ERROR: The character \"}\" is not valid inside a JSX element, but can be escaped as \"{'}'}\" instead\n")
+
 	expectPrintedTS(t, "const x = <number>1", "const x = 1;\n")
 	expectPrintedTSX(t, "const x = <number>1</number>", "const x = /* @__PURE__ */ React.createElement(\"number\", null, \"1\");\n")
 	expectParseErrorTSX(t, "const x = <number>1", "<stdin>: ERROR: Unexpected end of file\n")
@@ -1846,15 +1849,16 @@ func TestTSJSX(t *testing.T) {
 	expectPrintedTS(t, "const x = <[]>(y, z)", "const x = (y, z);\n")
 	expectPrintedTS(t, "const x = <[]>(y, z) => {}", "const x = (y, z) => {\n};\n")
 
-	expectPrintedTSX(t, "(<T>(y) => {}</T>)", "/* @__PURE__ */ React.createElement(T, null, \"(y) => \");\n")
-	expectPrintedTSX(t, "(<T extends>(y) => {}</T>)", "/* @__PURE__ */ React.createElement(T, {\n  extends: true\n}, \"(y) => \");\n")
-	expectPrintedTSX(t, "(<T extends={false}>(y) => {}</T>)", "/* @__PURE__ */ React.createElement(T, {\n  extends: false\n}, \"(y) => \");\n")
+	invalid := "<stdin>: ERROR: The character \">\" is not valid inside a JSX element, but can be escaped as \"{'>'}\" instead\n"
+	expectParseErrorTSX(t, "(<T>(y) => {}</T>)", invalid)
+	expectParseErrorTSX(t, "(<T extends>(y) => {}</T>)", invalid)
+	expectParseErrorTSX(t, "(<T extends={false}>(y) => {}</T>)", invalid)
 	expectPrintedTSX(t, "(<T extends X>(y) => {})", "(y) => {\n};\n")
 	expectPrintedTSX(t, "(<T extends X = Y>(y) => {})", "(y) => {\n};\n")
 	expectPrintedTSX(t, "(<T,>() => {})", "() => {\n};\n")
 	expectPrintedTSX(t, "(<T, X>(y) => {})", "(y) => {\n};\n")
 	expectPrintedTSX(t, "(<T, X>(y): (() => {}) => {})", "(y) => {\n};\n")
-	expectParseErrorTSX(t, "(<T>() => {})", "<stdin>: ERROR: Unexpected end of file\n")
+	expectParseErrorTSX(t, "(<T>() => {})", invalid+"<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")