Proposal: throw syntax error for `}` and `>` in JSX text.
Closed this issue · 0 comments
Feature Request
The JSX spec [1][2] lists }
and >
as invalid JSX text characters.
JSXTextCharacter :
- SourceCharacter but not one of {, <, > or }
However, acorn does not throw a syntax error when it encounters a naked }
or >
in a JSXText string.
According to the spec, the only way you should be able to include either of these characters (similarly for {
and <
), is via a string expression: {'>'}
.
Describe the solution you'd like
I propose that acorn should follow the JSX spec, and throw a syntax error if it encounters a "naked" }
or >
within jsx text.
From my experience, it's uncommon that these characters are intentionally put in JSX text, and are instead the result of typos (i.e. typing {}
, but having an editor auto-complete an extra }
=> {}}
), or copy pasting errors.
Flow has already updated their parser to flag this as an error [3][4].
I have submitted issues for this in both TypeScript [5] and Babel [6].
Teachability, Documentation, Adoption, Migration Strategy
I think the best way to document this would be via clear and explicit error messaging.
For example, the following code:
function F() {
return <div>></div>;
}
function G() {
return <div>{1}}</div>;
}
produces the following flow errors:
4: return <div>></div>;
^ Unexpected token `>`. Did you mean `{'>'}`?
8: return <div>{1}}</div>;
^ Unexpected token `}`. Did you mean `{'}'}`?
Related:
[1] https://facebook.github.io/jsx/
[2] facebook/jsx#18
[3] https://github.com/facebook/flow/blob/master/Changelog.md#01160
[4] facebook/flow@e1d0038
[5] microsoft/TypeScript#36341
[6] babel/babel#11042