question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

bildschirmfoto 2019-02-08 um 09 59 07

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
ianschmitzcommented, Apr 18, 2019

You can try our latest 3.0 alpha which has updated versions of babel: https://github.com/facebook/create-react-app/issues/6475

0reactions
sbuschcommented, Jul 10, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Syntax error for Typescript arrow functions with generics
In this example, I put <Lecture> in front of the arrow function - so there is no error in the implementation, but now...
Read more >
Documentation - Everyday Types - TypeScript
We'll learn more about the syntax T<U> when we cover generics. Note that [number] is a different thing ... Contextual typing also applies...
Read more >
Documentation - More on Functions - TypeScript
The simplest way to describe a function is with a function type expression. These types are syntactically similar to arrow functions:.
Read more >
Documentation - Classes - TypeScript
TypeScript provides some ways to mitigate or prevent this kind of error. Arrow Functions. Background Reading: Arrow functions (MDN). If you have a...
Read more >
TypeScript: JavaScript With Syntax For Types.
TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found