Repository navigation
TypeScript syntax error in combination with arrow functions, generics and async/await #6360
Description
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 FoundSteps 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
Activity
sbusch commentedon Feb 22, 2019
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 commentedon Mar 11, 2019
Add TypeScript linting support
Issue #5641
Pull #6513
xaviergonz commentedon Apr 17, 2019
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 commentedon Apr 17, 2019
Apparently it got fixed here
babel/babel#9560
so it should be fixed by upgrading babel to the latest version
xaviergonz commentedon Apr 17, 2019
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 commentedon Apr 18, 2019
You can try our latest 3.0 alpha which has updated versions of babel: #6475
sbusch commentedon Jul 10, 2019
I can confirm his is no longer an issue with CRA 3.0 (I'm currently using 3.0.1).