Line numbers reported in TypeScript syntax errors can be incorrect

Created by: sophiebits

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

(Write your steps here:)

Run npx create-react-app --template typescript bug
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