Description
TypeScript Version: 3.7.x-dev.201xxxxx
Search Terms:
jsx children child
Code
import * as React from 'react';
const a = <div>}</div>;
const b = <div>></div>;Expected behavior:
Typescript throws a syntax error, as } and > are not valid JSX text characters, as per the JSX spec:
https://facebook.github.io/jsx/
JSXTextCharacter :
- SourceCharacter but not one of {, <, > or }
Actual behavior:
No errors.
Related - typescript errors on { and <, but not because they are invalid characters; it instead errors due to the ambiguity in the syntax and it treating them as an unterminated expression and an incorrect tag respectively.
Related Issues:
https://github.com/facebook/flow/blob/master/Changelog.md#01160
facebook/flow@e1d0038
babel/babel#11042
acornjs/acorn-jsx#106
I'm bringing this up because flow just made this change, and it seems like a logical one.
Considering it's almost always going to be a UI bug caused due to typos, it seems like a good idea to error on it. Those that want those characters can be explicit and wrap the character as an expression ({'>'}, which is the same thing you do if you want an end of line space).
For reference, this is what now happens when you attempt to parse } or > in flow:
This 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 `{'}'}`?