Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Didn't try. I think this is irrelevant. I have 5.6.0

Which terms did you search for in User Guide?

map source lines

Environment

1. npm ls react-scripts-ts (if you haven’t ejected):
   react-scripts-ts@2.16.0

2. node -v:
   v8.11.2

3. npm -v:
   5.6.0

4. yarn --version (if you use Yarn):
   1.5.1

5. npm ls react-scripts-ts (if you haven’t ejected):
   Is this different from 1?

Then, specify:

1. Operating system:
   Mac OS 10.13.3

2. Browser and version (if relevant):
   Chrome 66

Steps to Reproduce

(Write your steps here:)

1. create a fresh app and ensure all is working

$ create-react-app test-ts --scripts-version=react-scripts-ts$ cd test-ts$ yarn run start

(I also added"allowSyntheticDefaultImports": true to tsconfig.json but that's irrelevant)

2. Create a fileFoo.tsx containing:

import React from "react";const Foo = () => <div>  Hello in Foo.js  {somethingThatThrows()}</div>;const somethingThatThrows = () => {  throw new Error("HERE");};export default Foo;

Use it fromApp.tsx and notice that the error line numbers and highlights in the browser are absolutely 100% correct (see screenshot).

3. Rename the file toFoo.js and restartyarn run start.

Expected Behavior

That the output error is in the exact same place.

Actual Behavior

The source maps are messed up and the highlighted lines is wrong. (see screenshot)

Reproducible Demo

It's pretty straightforward to produce. Available upon request. :-)

We have a huge project that we're migrating to typescript and not having source map along the trip will cause huge frustration.

Thank you in advance for your help.