Source map wrong for JS files

[azizghuloum]

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 file Foo.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 from App.tsx and notice that the error line numbers and highlights in the browser are absolutely 100% correct (see screenshot).

3. Rename the file to Foo.js and restart yarn 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.

[wilcus]

@azizghuloum To solve this I have to change devtool to 'source-map' in webpack-config-dev. I'd ejected the project before.

module.exports = {
  devtool: 'source-map',

[fc]

in config-overrides.js, you can also do this:

module.exports = function override(config, env) {
  // ..
  config.devtool = 'source-map';
  return config;
};

[shobhitg]

@wilcus and @fc

I am having this same issue (#440).

But looks like this workaround won't work because I will have to change everytime I do yarn install in my local version:
https://github.com/wmonk/create-react-app-typescript/blob/master/config/webpack.config.dev.js#L40

I would have to change from devtool: 'cheap-module-source-map' to devtool: 'source-map' every time in ./node_modules/react-scripts-ts/config/webpack.config.dev.js.

Is there a workaround where I can create some config file in root of my project to solve this issue?

[fc]

@shobhitg As of create-react-app 2.1.0, it now supports TypeScript, is there a reason you cannot use that?
https://github.com/facebook/create-react-app/releases

[shobhitg]

@fc I had started my project a month before official CRA 2.1.0 came out.

Things were going fine and I had no reason to budge until I hit this .jsx source-map issue.

Also I heard there were some differences in CRA 2.1.0 (babel based) and this react-scripts-ts (tsc-loader based). Something about enums not being supported in Babel's TS, but I don't remember exact.

I will give CRA 2.1.0 a shot. But don't know if there would be any hurdles in converting the project.

But I really wish this react-scripts-ts project had a way to customize webpack config.

[shobhitg]

I tried CRA 2.1.0.

I ran npx create-react-app hello-tsx --typescript.
But the files that were created were all .js.

[fc]

It looks like the jsx file extension is supported according their source:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js#L229-L234