Generic arrow function in Typescript cause esbuild error

[yankydoo]

Describe the bug

The usage of <T, > in .tsx files causes an error.

For example, this causes an error:

const doSomething = <T, >(value: T): T => { return value; }

While this works:

function doSomething<T>(value: T): T { return value; }

@n1ru4l reported this issue in the esbuild project but they determined that this is not an esbuild problem: evanw/esbuild#934

Reproduction

https://github.com/yankydoo/vite-generic-arrow-function-repro

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 16.05 GB / 31.93 GB
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.106
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.54)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    vite: ^2.3.7 => 2.3.7

Used package manager: yarn

Logs

Error message in the browser when running vite:

[plugin:vite:esbuild] Transform failed with 1 error:
C:/path/to/project/file.tsx:189:2: error: Unexpected "return"

C:/path/to/project/file.tsx:189:2

Unexpected "return"
187|  
188|  const doSomething = <T>(value: T): T => {
189|    return value;
   |    ^
190|  };
191|

    at failureErrorWithLog (C:\path\to\project\node_modules\esbuild\lib\main.js:1449:15)
    at C:\path\to\project\node_modules\esbuild\lib\main.js:1260:29
    at C:\path\to\project\node_modules\esbuild\lib\main.js:609:9
    at handleIncomingPacket (C:\path\to\project\node_modules\esbuild\lib\main.js:706:9)
    at Socket.readFromStdout (C:\path\to\project\node_modules\esbuild\lib\main.js:576:7)
    at Socket.emit (events.js:315:20)
    at addChunk (internal/streams/readable.js:309:12)
    at readableAddChunk (internal/streams/readable.js:284:9)
    at Socket.Readable.push (internal/streams/readable.js:223:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:188:23

Here you can see that the comma is missing - maybe some preprocessing step strips it away?

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[RSWilli]

I had the same problem with other build systems. This is not a problem with vitejs, but rather the typescript compiler

Typescript on the other hand cannot solve this problem (in tsx files), because you could always be using the XML syntax and the compiler cannot distinguish between them.

https://stackoverflow.com/a/37687827

in tsx files you have to always use the extends keyword explicitly, which will work

[yankydoo]

The compiler can distinguish between them as long as you add some "hint". In my case, the hint is the comma:

const doSomething = <T, >(value: T): T => { return value; }

But the comma seems to get lost before the code reaches esbuild (in the log output the comma doesn't show up anymore).

I am sure that this problem lies within the vite dev server pipeline as it works without a problem with, e.g., create-react-app. Even vite build works.

[y1d7ng]

the plugin @vitejs/plugin-react-refresh transform it

vite/packages/plugin-react-refresh/index.js

Line 97 in bb095db

parserPlugins.push('typescript', 'decorators-legacy')

vite/packages/plugin-react-refresh/index.js

Line 104 in bb095db

const result = transformSync(code, {

[yankydoo]

@OneNail Can you please help me understand what exactly is at fault here? Is it the typescript plugin of babel? Or is there something wrong with how it is used within '@vitejs/plugin-react-refresh'?

If the error lies outside of vitejs I would file a bug report there.

[y1d7ng]

@OneNail Can you please help me understand what exactly is at fault here? Is it the typescript plugin of babel? Or is there something wrong with how it is used within '@vitejs/plugin-react-refresh'?

If the error lies outside of vitejs I would file a bug report there.

const doSomething2 = <T,>(value: T): T => {
  return value;
};

const { transformSync } = require("@babel/core");
const result = transformSync(code, {
  parserOpts: {
    plugins: [ "typescript" ]
  },
});

the result.code is:

const doSomething2 = <T>(value: T): T => {\n  return value;\n};

babel's transform

[tomo0613]

Something very similar

interface MyGenericComponentProps<T, >{
    aPropToFilter: T;
    aProp: unknown;
    bProp: unknown;
}

export const MyGenericComponent = <T, >({ aPropToFilter, ...propsToPass }: MyGenericComponentProps<T>) => {
    return null;
};

The code above results the following error:
[plugin:vite:esbuild] Transform failed with 1 error: /.../MyGenericComponent.tsx:6:2: error: Unexpected "..."

The code below works

export function MyGenericComponent<T, >({ aPropToFilter, ...propsToPass }: MyGenericComponentProps<T>) {
    return null;
};

[jraoult]

EDIT: my bad the issue is in the generator package and yes there is an issue filed: babel/babel#13778 that is coming from #4949

It's my third attempt to convert a large codebase to Vite and I'm glad I finally found this issue that put me on the right track.

@OneNail @sodatea from my understanding this is an issue with the TS parser in Babel. Did any of you file an issue with Babel for this?

[yankydoo]

The issue was fixed in babel@7.16.8 (PR babel/babel#14113).

#4949 might also be closed