VSCode breakpoint not working in typescript with sourcemap generated by gulp-sourcemaps

Question

I have a typescript file users.ts in a sub-directory routes .

The gulp code in gulpfile.js :

var tsProject = ts.createProject(tsConfigFile);
return tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject))
    .js
    .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''})) 
    .pipe(gulp.dest('.'));

The sourcemap generated by gulp-sourcemaps does not work with VSCode :

{"version":3,"sources":["routes/users.ts"],"names":[], "mappings":"...","file":"routes/users.js","sourceRoot":""}

The sourcemap generated by tsc works fine in VSCode:

{"version":3,"file":"users.js","sourceRoot":"","sources":["users.ts"],"names":[], "mappings":"..."}

and the VSCode breakpoint works fine with the sourcemap generated by tsc .

So how to config gulp-typescript/gulp-sourcemaps to generate the same sourcemap as tsc ?

Answer 1

It is the same problem as in Gulp Typescript + Browserify; Bundled sourcemap points to transpiled JS rather than source TS
Add sourceRoot function to sourcemaps.write(...)
Assuming your .ts files are in src folder of the project, sourcemaps pipe will look like:

.pipe(sourcemaps.write('.', {
           sourceRoot: function(file){ return file.cwd + '/src'; }
      }))

Answer 2

Sourcemap paths will be correct on the machine where you build them with v-andrew's method. However, if you want to compile the sourcemaps once to work on multiple machines, use relative filepaths:

var path = require('path');

...

.pipe(sourcemaps.write('.', {
  includeContent: false,
  sourceRoot: function(file) {
    var fullPath = path.join(file.cwd, file.path);
    return path.relative(fullPath, file.base);
  },
}))

Answer 3

I'm using gulp-sourcemaps 2.6.1 on Windows, and @Westy92's solution doesn't work (anymore?), because file.path returns the absolute file path (including file name):

var path = require('path');

...

.pipe(sourcemaps.write({
  includeContent: false,
  sourceRoot: function(file) {
    return path.relative(path.dirname(file.path), file.base);
  },
}))

Answer 4

The accepted answer is correct, however it took me some time to realize why this worked & how to adjust the answer for my particular environment (in my case I needed to drop the /src suffix).

If you inspect the generated source maps (this only works when outputting to map files, eg sourcemaps.write('.') ) you should see two fields in the json object: sources and sourceRoot , there are two things you need to be sure of:

1. sourceRoot should be an absolute path.
2. Each path in sources should combine with sourceRoot to form the absolute path to your source file.

If #1 isn't true the path will work in some cases and not in others (some tools resolve relative paths relative to source map file, others based on your workspace root, cwd, or some other path).

If #2 isn't true your tools will be looking in the wrong place for the source files.

One other hint: Remember that changing your gulpfile doesn't trigger a rerun of watch mode or clear any file caches, since your source file didn't change.