Issue with generic syntax in .tsx

Describe the bug

This is a common hack to use a comma to declare generics without default or extends in TSX file. It’s seems that some part of the build chain (in dev mode) drop the comma, making the file invalid.

Reproduction

https://github.com/ArnaudBarre/vite-generic-bug

Equivalent to yarn create @vitejs/app --template react-ts + update main.tsx to:

const App = <T,>(props: {value: T}) => {
    return <div>Hello {typeof props.value}</div>
}

ReactDOM.render(
  <React.StrictMode>
    <App value="string" />
  </React.StrictMode>,
  document.getElementById('root')
)

System Info

• vite version: 2.0.4 (esbuild 0.8.53)
• Operating System: Mac
• Node version: 14.13.1
• Package manager: yarn 1.22.10

[ArnaudBarre]

The issue is coming from babel typescript or jsx parser (used in react refresh plugin). I opened an issue in the babel repo.

In the meantime, using <T extends unknown> works

[ArnaudBarre]

This code works with CRA, vite build, esbuild directly, and tsc. Just not with vite dev. I think there is an issue with the pipeline that doesn’t not take into account that the comma is important when loading tsx files for the reason that TSX ans TS generics are different (the code source has a comma, the error message no. )