Remote debug node in docker container - sourcemaps in WebStorm - node.js

Question

I have problems debugging contenerized application using WebStorm (or IntelliJ) remote debugging option which works perfect when trying to remote debug application running locally.
Here are the relevant parts of my gulp config file:
gulp.task("mainCompile", () =>
gulp.src(`${config.src.main.baseDir}/**/*.js`, {base: "./src"})
.pipe(plugins.sourcemaps.init())
.pipe(plugins.babel())
.pipe(plugins.sourcemaps.write(".", {
includeContent: false,
sourceRoot: "../src"
}))
.pipe(gulp.dest(config.build.baseDir))
);
gulp.task("nodemon", ["copyResources", "compile"], () =>
plugins.nodemon({
execMap: {
js: "node --debug-brk"
},
script: path.join(config.build.mainDir, "index.js"),
ext: "js yaml",
delay: 2500,
debug: true,
verbose: true,
watch: config.src.main.baseDir,
tasks: ["copyNonJs", "yamlToJson", "compile"]
})
);
And the part of compose config. As you can see I mount the project root at /app in the container.
server:
image: justmarried/jmserver:development-latest
build:
context: .
dockerfile: containers/develop/Dockerfile
ports:
- 2701:2701
- 5858:5858
volumes:
- ./:/app
Remote debugger attaches but stops only for breakpoints defined in index.js (or if I put a breakpoint inside "build" dir which is not what I want). When the app is fully loaded I get this:
As you can see index.js gets mapped perfectly but none of the other files do. Tried to inline code into sourcemaps but it didn't help. Is it a bug in WebStorm (newest, 2017.1.3)?
One more observation. When I do "show actual source" of any files in build dir in scripts tab in debug tab I get sth. like this:
(function (exports, require, module, __filename, __dirname) { "use strict";
var _httpStatus = require("http-status");
var _httpStatus2 = _interopRequireDefault(_httpStatus);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = {
get: function get(req, res) {
res.status(_httpStatus2.default.OK).json({
text: "Hi there!"
});
}
};
//# sourceMappingURL=ping.js.map
});
But when I do "show source" I get
"use strict";
var _httpStatus = require("http-status");
var _httpStatus2 = _interopRequireDefault(_httpStatus);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = {
get: function get(req, res) {
res.status(_httpStatus2.default.OK).json({
text: "Hi there!"
});
}
};
//# sourceMappingURL=ping.js.map
Of course the actual source of that file resides in the src/main dir not build/main dir and is:
import HttpStatus from "http-status";
module.exports = {
get(req, res) {
res.status(HttpStatus.OK).json({
text: "Hi there!"
});
}
};
The contents of that ping.js.map is:
{"version":3,"sources":["main/handlers/ping.js"],"names":["module","exports","get","req","res","status","OK","json","text"],"mappings":";;AAAA;;;;;;AAEAA,OAAOC,OAAP,GAAiB;AACfC,KADe,eACXC,GADW,EACNC,GADM,EACD;AACZA,QAAIC,MAAJ,CAAW,qBAAWC,EAAtB,EAA0BC,IAA1B,CAA+B;AAC7BC,YAAM;AADuB,KAA/B;AAGD;AALc,CAAjB","file":"ping.js","sourceRoot":"../../../src"}