Getting the below error on a new TS file containing JSX for React native:
Unexpected token, expected ","
Below is the code for the component I'm making. The error appears to
class TabLabel extends React.PureComponent<IReactionsLabelProps> {
constructor(props: IReactionsLabelProps) {
super(props);
}
render = () => {
const { name, baseUrl, getCustomEmoji, reactions, page, theme } = this.props;
return (
<View style={ sharedStyles.tabView }>
<Emoji
content={name}
standardEmojiStyle={sharedStyles.reactionEmoji}
customEmojiStyle={sharedStyles.reactionCustomEmoji}
baseUrl={baseUrl}
getCustomEmoji={getCustomEmoji}
/>
<Text style={{
...sharedStyles.textBold, color: themes[theme].bodyText
}}>
{ reactions[page]?.usernames?.length }
</Text>
</View>
);
}
}
The linter provides a different error near the "style" prop in the first line of the JSX: Parsing error: '>' expected
I am completely stuck and have no idea what's going wrong. Full file is available at https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/b1f9916ed8f9a423e356987d934998a139809627/app/views/ReactionsView/index.ts#L45
I'll answer my own question. And I feel exceedingly dumb now, needless to say, having spent literal hours trying to solve this.
Just had to change the extension of the file from .ts to .tsx, and it worked.