Wrong source map is generated

[digeff]

The source maps generated by the react-native packager seem to not be generated properly. We've seen in several projects that the mapping to/from around the React Tags code seems to not be correct.

For example, a user reported this issue: microsoft/vscode-react-native#206 (comment) in our project, and the root cause of the issue is because the source map file generated by the react-native packager is not correctly mapping to the original source code (The original source code has 76 lines, and the .map files point to line 85 on that file).

[satya164]

Could you provide an example repo where we can reproduce this issue?

[digeff]

Yes, @gilesbradshaw was having this issue on his app, and he told us we can install it by doing:

git clone https://github.com/gilesbradshaw/ua-ql-mobile.git awesome2
cd awesome2
npm i

In microsoft/vscode-react-native#206 (comment) he describes exactly where to put the breakpoint to reproduce this issue (Which is also where the source maps aren't being correctly generated).

[gilesbradshaw]

Thanks for looking let me know if you cannot replicate with that repo

[janicduplessis]

I also had this issue recently where sources maps were off by ~10-20 lines. It only happened in component files with jsx.

[mroswald]

The more import-statements, jsx-syntax or es6-classes in the module, the more difference is between correct lines and the generated source map.

[digeff]

@satya164 Any updates on this?

[spikebrehm]

I've found a different symptom: the source maps are pointing to the entirely wrong files. Has anyone else experienced this?

[JaxGit]

@spikebrehm we are experiencing the same. At first by combining some of the imports we could get it back to work, however when the project goes, we lost more and more correct file mapping when debugging in Chrome. We have to try debugging in Nuclide to get to the exact breakpoints in exact files in those cases but it's not as powerful as Chrome.

[charpeni]

@facebook-github-bot label Icebox

[charpeni]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/wrong-source-map-is-generated

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.