Inline sourcemaps generated by gulp-sourcemaps not working in VS-code debugger

Question

I am trying to generate source-maps with a gulp task. I'm transpiling my code with Babel, and I would like to be able to use the debugger from VS Code. I don't know a lot about source-maps, and my way of determining if they are valid or not is to attempt using the debugger with breakpoints (if it stops on the breakpoints, then it works).

Here is my script:

// src/main.js
const i = 1;
const n = 2*i; // breakpoint on this line
console.log(n);

And here is my configuration for the debugger:

//.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/dist/main.js"
    }
  ]
}

The command npx babel src --out-dir dist --source-maps transpiles my code and a .js.map file is created in the dist folder. Executing the debugger configuration from above works as intended. The debugger stops on the breakpoint.

The command npx babel src --out-dir dist --source-maps inline transpiles my code and the source maps are embedded within the .js output file. Executing the debugger configuration from above also works as intended. The debugger stops on the breakpoint.

This shows that my debugger configuration should be working for both inline and external source maps.

I created the following Gulp task for the transpilation of my code.

import {dest, src} from "gulp";
import babel from "gulp-babel";
import sourcemaps  from "gulp-sourcemaps";

function transpile() {
  return src("src/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(sourcemaps.write(
      ".",
      {
          includeContent: false,
          sourceRoot: "../src"
      }))
    .pipe(dest("dist"));
}
export {transpile};

The command npx gulp transpile executes this task and a .js.map file is created in the dist folder. Executing the debugger configuration from above works as intended. The debugger stops on the breakpoint.

I then edited the Gulp task above so that it would give me inline source maps:

import {dest, src} from "gulp";
import babel from "gulp-babel";
import sourcemaps  from "gulp-sourcemaps";

function transpile() {
  return src("src/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(sourcemaps.write())
    .pipe(dest("dist"));
}
export {transpile};

The command npx gulp transpile executes this task and the source maps are embedded in my output file. However, the debugger doesn't stop on the break point. I've not been able to understand why so far.

Since this is the only case where the debugger doesn't work, I believe the debugger is not the source of the problem. It must be linked to the source map.

Any idea? Thanks a lot!