TypeScript syntax error in combination with arrow functions, generics and async/await
See original GitHub issueIs 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
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You can try our latest 3.0 alpha which has updated versions of babel: https://github.com/facebook/create-react-app/issues/6475
I can confirm his is no longer an issue with CRA 3.0 (I’m currently using 3.0.1).