TypeScript syntax error in combination with arrow functions, generics and async/await

[sbusch]

Is this a bug report?

Yes, this is a bug report.

I get a syntax error with the following code, which I reduced as much as possible to just trigger the error:

const first = async <X extends {}>() => {
  await something();
};

const second = async <Y extends {}>() => {};

Did you try recovering your dependencies?

Yes, but recovering didn't help.

Output of yarn --version:

1.13.0

Environment

$ npx create-react-app --info

Environment Info:

  System:
    OS: macOS 10.14.2
    CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 11.9.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0.2
    Safari: 12.0.2
  npmPackages:
    react: ^16.8.1 => 16.8.1 
    react-dom: ^16.8.1 => 16.8.1 
    react-scripts: 2.1.3 => 2.1.3 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

See "Reproducible Demo".

Expected Behavior

I wouldn't expect a syntax error (other errors with this code, yes, but no syntax error)

AFAIK the code is valid TypeScript.

Actual Behavior

Syntax error:

Failed to compile.

./src/index.tsx
SyntaxError: /Users/sebu/Desktop/2019-02-08-cra-ts-syntaxerror/src/index.tsx: Unexpected token, expected ";" (5:24)

  3 | };
  4 | 
> 5 | const second = async <Y extends {}>() => {};
    |                         ^
  6 | 

As colorized screenshot:

Reproducible Demo

Reproducible repo at https://github.com/sbusch/2019-02-08-cra-ts-syntaxerror which I stripped down as much as possible.

Problem is in src/index.tsx:

Steps to reproduce:

git clone https://github.com/sbusch/2019-02-08-cra-ts-syntaxerror.git

cd 2019-02-08-cra-ts-syntaxerror

yarn install

BROWSER=none yarn start

[sbusch]

The problem still exists with project generated by 2.1.5, see branch react-scripts-2.1.5 at my repro.

I also tested with new project generated by current HEAD 01fbb79 of create-react-app, with the same outcome.

[nsmithdev]

Add TypeScript linting support
Issue #5641
Pull #6513

[xaviergonz]

I think this error comes from babel interaction with typescript, since it works OK when using the typescript compiler directly yet it fails when compiling typescript through babel, so I'd also try to post it into the babel repo

[xaviergonz]

Apparently it got fixed here

babel/babel#9560

so it should be fixed by upgrading babel to the latest version

[xaviergonz]

babel REPL: https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBAZgSwE7RgXhgQwgTzMGAHgA0YBTADyjLABMIYBvAXwD4AKASnVaYCgYWAO6YEsCCAC2ZKAAsEYAOZcA3H2Zq-oSOLLba6LLnxEAmuSo16TNlx42VQA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2017%2Ctypescript&prettier=false&targets=&version=7.4.3&externalPlugins=%40babel%2Fplugin-transform-typescript%407.4.0

[ianschmitz]

You can try our latest 3.0 alpha which has updated versions of babel: #6475

[sbusch]

I can confirm his is no longer an issue with CRA 3.0 (I'm currently using 3.0.1).