profile
viewpoint

Ask questionsLine numbers reported in TypeScript syntax errors can be incorrect

Sometimes syntax errors have the wrong line numbers.

Needless to say, this is confusing.

Environment

Environment Info:

  current version of create-react-app: 3.4.1
  running from /Users/sophiebits/.npm/_npx/57068/lib/node_modules/create-react-app

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
  Browsers:
    Chrome: 80.0.3987.162
    Firefox: 71.0
    Safari: 13.1
  npmPackages:
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-scripts: 3.4.1 => 3.4.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

<!-- How would you describe your issue to someone who doesn’t know you or your project? Try to write a sequence of steps that anybody can repeat to see the issue. -->

(Write your steps here:)

  1. Run npx create-react-app --template typescript bug
  2. Replace bug/src/App.tsx with the following:
const x = useReducer<A, B>((state, action) => {
  here();
  are();
  some();
  lines();
  to();
  demonstrate();
  the();
  line();
  number();
  can();
  be();
  way();
  off();
  case 'hello':
});

Expected behavior

When loading the project in a browser, expected the error message:

Unexpected token (15:2)

  13 |   way();
  14 |   off();
> 15 |   case 'hello':
     |   ^
  16 | });
  17 | 

Actual behavior

Got the error message:

./src/App.tsx
SyntaxError: /path/to/src/App.tsx: Unexpected token, expected ";" (1:25)

> 1 | const x = useReducer<A, B>((state, action) => {
    |                          ^
  2 |   here();
  3 |   are();
  4 |   some();

NB: yarn tsc does output the right line number in this case, so I don't think it's a TS bug:

$ yarn tsc
src/App.tsx:15:3 - error TS1128: Declaration or statement expected.
15   case 'hello':

Interestingly, the bug goes away if you remove the type param <A, B>.

Reproducible demo

https://github.com/sophiebits/cra-typescript-line-numbers-bug

facebook/create-react-app

Answer questions sophiebits

Guess what's still relevant.

useful!
source:https://uonfu.com/
answerer
Sophie Alpert sophiebits Humu California https://sophiebits.com/ I like fixing things. eng at humu! former eng manager of @reactjs at Facebook. ex-@khanacademy. 💎🌸 she/her. kindness, intersectional feminism, music.
Github User Rank List