Sourcemaps get wrong mapping

[pailhead]

It took me a while to figure out that the sourcemap mapping issue i had was due to browserify-shader.

This is my gulp task:

var bundler = browserify('./www/js/app/main.js', {
    debug: true
});

if (watch) {
    bundler = watchify(bundler);
    bundler.on('update', function(){ bundle(bundler) });
    bundler.on('log', function(message){ $.util.log(message) });
}

bundler.transform(
    babelify.configure({
        sourceMapRelative: 'www/js',
        presets: ['es2015'],
        plugins: ['transform-class-properties']
    })
);

bundler.transform('browserify-shader');

bundler.bundle()
    .on('error',notifier)
    .pipe( source('main.bundle.js') )//vinyl-source-stream
    // .pipe(buffer())
    // .pipe(sourcemaps.init({loadMaps: true }))
    // .pipe( sourcemaps.write('./'))

    .pipe(gulp.dest('./www/js/'));

but then i would get this

var crossFadeMaterial = new THREE.ShaderMaterial({

uniforms:{
    uTexA:{
        type:'t',
        value:null
    },
    uTexB:{
        type:'t',
        value:null
    },
    uFade:{
        type:'f',
        value:0
    }
},
vertexShader: require('./crossFade.vert')(),
fragmentShader: require( './crossFade.frag')()

});


export default class CrossFadePlane extends THREE.Mesh {

constructor(){

    super( pg , crossFadeMaterial.clone() );
    console.log('foo',this);
}
...

Removing all calls to require('someShader') mapped everything correctly.