Source maps do not work with Gulp, Browserify, Babelify, Uglify, gulp -rename and gulp -sourcemaps

Question

Source maps do not work with Gulp, Browserify, Babelify, Uglify, gulp -rename and gulp -sourcemaps

I am working on a project that uses the following tools:

I can generate a distribution file and it works correctly. However, the generated source map is incorrect. When I upload it to Chrome, Chrome cannot map the distribution file to the source files. My problem is similar (but not the same) for this . Unfortunately, this similar problem has no answer, so this does not help me.

I also tried to follow this recipe , but that does not fit my case.

This is the appropriate code for my setup ( gulpfile.js):

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('build:dist', function() {
   var browserifyInstance = browserify({
      entries: 'src/module.js',
      debug: true,
      standalone: 'Module',
      bundleExternal: false,
      transform: [babelify]
   });

   return browserifyInstance
      .bundle()
      .pipe(source('module.js'))
      .pipe(rename({
         extname: '.min.js'
      }))
      .pipe(buffer())
      .pipe(sourcemaps.init({
         loadMaps: true
      }))
      .pipe(uglify())
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('dist'));
});