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?

Cataclysm

What is the .js call after pipe(ts(tsProject))? – Grove

see npmjs.com/package/gulp-typescript#source-maps , .js is called after `pipe(ts(tsProject)) – Cataclysm

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'; }
      }))

Reest

I'm having the same issue as OP (also works fine with TSC generated sourcemaps), unfortunately this does not solve it. – Binnie

Confirmed this works. @Binnie Make sure that the '/src' part maps to root of your project relative to the root of your project. You might need to use other values such as '' or '/src/server', etc. – Decalescence

Could you post the relevant bits of your gulpfile.js and your project layout ? Thanks ! – Binnie

Ok, I think I've found the issue. Using sourceRoot works fine. But for some reason gulp-typescript lowercases the filenames which somehow break VSCode's file mapping, see this gulp-typescript issue. Thanks. – Binnie

Answer 2

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, e.g. 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.

Celina

Answer 3

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);
  },
}))

Headman

Answer 4

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);
  },
}))

Gateshead