[babel-generator] Generated code doesn’t match with source with input source-maps

[alloy]

Input Code

I’ve put up a repo here

The relevant code is here

Expected Behavior

I would have expected the source-map from babel-generator to map from the original TypeScript source to the generated JS.

Current Behavior

The source-map doesn’t appear to have any relation to the original code.

Here are some examples of the code looked-up through the source-maps:

 Original: import * as React fr
Transform: var React=require("
 Generate: "use strict";

 Original: function MyComponent
Transform: function MyComponen
 Generate:  require("react");

As you can see, the transform step does a good job of mapping to the original code, but the generate step just produces something completely different.

Context

I’m trying to use TypeScript for our React Native project and have inline source-maps propagate properly through Babel. I would prefer to not write the intermediate JS (produced by tsc) to disk.

I’m not sure if I’m doing something wrong, if this has to do with how React Native uses transform and the generator, or if there’s a bug with babel-generator.

Your Environment

software	version
Babel	6.23.1
node	6.2.1
npm	4.1.1
Operating System	macOS 10.12.2

[babel-bot]

Hey @alloy! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[loganfsmyth]

Assuming I'm understanding fully, I think this may be the expected, if frustrating, behavior. babel-generator outputs a sourcemap that maps to the sourcecode that was parsed to create the AST and does not take input sourcemaps into account. Currently they are merged inside babel-core in https://github.com/babel/babel/blob/7.0/packages/babel-core/src/transformation/file/index.js#L364, so if you want to generate the code from the AST yourself, you'd have to reimplement that merging logic.

I could see the benefit of moving this logic, so I'm happy to have this as a feature request if you'd like. Not sure it would be a high priority for the core team to implement though.

[alloy]

Ah yes! This works: alloy/test-source-maps-with-typescript-through-babel@a2982c8

I was stepping through all the code looking for when the input and output maps of the generated code got merged and could only find it indeed in the transform step, glad I decided to ask.

So if I understand you correctly you’re suggesting to extract mergeSourceMap into a standalone utility function? If so, could you just point me to where you would want to have it? I’ll try to make a PR for it.

[loganfsmyth]

I think it would be reasonable to move mergeSourceMap into babel-generator so people could more easily do what you are trying to do.

[loganfsmyth]

A similar issue was just raised in aspnet/JavaScriptServices#739 (comment). In that usecase, people are expecting the AST locations to take the original sourcemap locations into account.

Given that, an alternative would be to actually delete mergeSourceMap entirely and have either babylon or babel-core ensure that the AST locations map to the original file content, so that the final map generated by babel-generator, and Babel's output AST, would have the correct position data already.

I'm fine with that as a solution as long as there's no loss of information.

[dan-j]

I think I came across a similar issue while trying to write a jest preprocessor for TS -> Babel and getting code coverage right.

I ended up not passing inputSourceMap into babel, and using source-map-merge to merge the source maps outputted by the TS compiler and babel respectively.

Perhaps babel should use this module for merging input source maps rather than it's own merge code? From debugging the issue before I resorted to source-map-merge the merge code inside babel is here:

https://github.com/babel/babel/blob/master/packages/babel-core/src/transformation/file/index.js#L368

[DrMiaow]

+1 for resolving this please.

My issue is that Babel is not merging with source-maps from previous steps in my transformation chain, it appears to simply generate its own source-map from the input, which seems to be the problem everyone else is having.

My workaround, for now, is to set retainLines: true, sourceMap: false and after transforming using Babel I copy the *.map files from the previous step to feed into the next step.

Not ideal, but does the job.

[PabloZaiden]

Any news on this?

[fbartho]

We're super invested in this, because it means that our bugsnags don't map back to the original TypeScript lines in our react-native source code :(

[fbartho]

Is there any way to solve this? A work around?

[dlebedynskyi]

Any update on this issue?

[dan-j]

Any update on this issue?

I doubt there is, I've no need for Babel in my current role and won't find the time to contribute (I just got the notification because I've previously commented).

If nothing much has changed in 4 years, my comment is my suggestion on fixing the issue: #5408 (comment), however I have no real idea whether or not that comment is applicable anymore.

If a maintainer can comment and approve of the idea then it may be worth you implementing the fix and contributing it back?

[shaunlebron]

Hello, my employer has asked me to help solve this, if possible.

We require this feature downstream in Metro (parallel issue here).

Can a maintainer answer some questions?

1. Does this issue imply that inputSourceMap: true isn’t actually working?
2. Is PR #12471 intended to fix this?
3. Is it possible for an outsider to help with this, or to catch up on domain knowledge to help?

Thank you. Hoping we can help solve this five-year-old issue!

[liuxingbaoyu]

Yes, inputSourceMap is currently invalid in babel-generator.
#12471 I'm not sure if that solves your problem.
Exactly this is in my plan, but I can't promise.

In addition, in theory babel-core can complete source map merging very well, can you use that?

ref: #15022 (comment)

[shaunlebron]

Thank you @liuxingbaoyu! Are you saying babel-core already does correct source map merging with inputSourceMap: true? (I actually don’t see Metro passing this option to babel-core in their repo…)

[liuxingbaoyu]

Yes, as in the OP's reproduced code. babel/core is merging source maps. So this is just an enhancement and shouldn't be blocking.