Sourcemaps not mapping all the way back to originals

[thany]

I'm using gulp-babel with the babili plugin, and the gulp-requirejs-optimize module to concat files.

Here's the relevant part of how I'm calling it:

return gulp.src(['source/js/main.js'], { base: "source" })
    .pipe(sourcemaps.init())
    .pipe(optimize(requireJsConfig))
    .pipe(babel({ presets: [ 'babili' ], comments: false }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('build/'));

So main.js is the entry point for my sources, which uses requirejs to include all the other files. Works great. But the problem is, the resulting sourcemaps only includes the entry point, not any of the other files.

This might look like a problem in gulp-requirejs-optimize, but when I leave out babel entirely, the sourcemaps are perfect. So I must conclude that babel is interfering somewhere that messes them up. I can leave out the babili plugin as well and call babel without any presets - same result.

I've also used source-map-explorer to try and visualize the sourcemaps, and it says:

> source-map-explorer build/js/main.js
Your source map only contains one source ( js/main.js )
This typically means that your source map doesn't map all the way back to the original sources.

Versions used:

• NodeJS 7.6.0
• NPM 4.1.2
• gulp 3.9.1
• gulp-babel 6.1.2
• gulp-sourcemaps 1.11.1
• gulp-requirejs-optimize 1.2.0

[lucaschen]

I'm getting the same issue. It tells me that there is an undefined index on line 237, but I check line 237 and it is an empty line. Removing gulp-babel fixes this issue.

[thany]

@parkroolucas When you say "fixes this issue", do you mean the whole issue is resolved by doing that, or do you mean the sourcemaps start working again but without minification?

[lucaschen]

@thany My gulpfile compiles ES6 code into browser-recognisable JavaScript, and aso minifies it. If I remove gulp-babel and write ES5 JavaScript instead of ES6, the sourcemapping works correctly, giving me the right line numbers; in other words, there is an issue with sourcemapping in gulp-babel, causing the referenced line numbers to mess up in error messages and whatnot.

[thany]

Ok, then your situation is different from mine. I'm using only the babili plugin. So I'm not converting to ES5. I write ES6, and support only modern browsers.

So I can't just do away with gulp-babel...

[guiprav]

We're having what appears to be the same problem, only we have gulp-typescript on the pipeline just before gulp-babel and no gulp-requirejs-optimize. If we leave gulp-babel out, TypeScript sourcemaps work just fine.

I was kinda hoping this would've been fixed when I tried today, since the issue has been around since early 2017. Has there been any progress on this since then?

I've been thinking of leaving sourcemaps off in production, but we use Sentry for error tracking, and the stacktrace is pretty useless without sourcemaps :(

[loganfsmyth]

@n2liquid Make sure you're using [email protected]. If so, then if you can post a reproduction repository, I can take a look.

[guiprav]

@loganfsmyth, I'll be doing that right away. Thanks!

[guiprav]

@loganfsmyth, yes, we're using [email protected].

Here you go: https://files.n2.gs/index.php/s/8NeipCOUkvsHzr8/download

1. Build with gulp with-minify or gulp without-minify (for comparison).
2. Open src/index.html on the browser.
3. Add a breakpoint to abc = 321; on index.js.
4. Refresh the page.

Expected outcome:

• Should be able to step to the next line (console.log(...)), etc.

Got:

• Step next button skips a line (takes me to };).
• Hitting the step next button again takes me to the minified file.
• Etc.

Notes:

• I've left gulp-typescript out of this repro to keep it minimal.
• I just realized @thany's problem was completely different (missing files, not wrong sourcemaps; sorry). Should I file a separate issue?
• But it does seem to similar to what @parkroolucas's had reported (which I think is what confused me).
• Keeping gulp-babel without minify preset prevents sourcemaps from breaking, but minification is the only thing I want out of Babel in this case (i.e. ES6 minification; prior ES5 transpilation is not a good option for us).