Type Parameter Definitions in Arrow Functions breaks TSX syntax highlighting

Problem description:
I was in a TSX file, created an arrow function, and added a Type Parameter T (shown below)

And the syntax highlighting got ripped to pieces

Screenshot 2023-09-06 at 1.32.36 PM

It seems to be parsing them as JSX instead of default Typescript.

Expected behavior:
Syntax Highlighting should not detect and highlight Type Parameters as JSX in TSX files

Steps to reproduce:

  1. Create a Typescript Repl
  2. Make sure LSP works
  3. Create a tsx file
  4. Create a react component and return some basic JSX (an empty div would work)
  5. Within the component, define an arrow function with type parameters
const testFunction = <T = any>(asdf: string) => asdf;
  1. Syntax highlighting will break.

Bug appears at this link:
Any Repl.

Reproduced in https://replit.com/@IroncladDev/VultangDev (private)
Repl ID: 614cf7f9-2ede-4fb9-9adf-3ea8e70dbc36

Browser: Chrome (Used desktop app)
Device (Android, iOS, n/a leave blank): Macbook Pro Ventura 14"
Plan (Free, Hacker, Pro Plan): Pro Plan

Hey @IroncladDev!

Iā€™m so sorry for the delay on this. I was able to reproduce the issue and have flagged this to the engineering team.


Thanks, man :slight_smile:

Appreciate it

1 Like