CODEWITHSUNDEEP
gulpbrowserify
Andreas Köberle
Andreas Köberle

Reputation: 110892

Browserify source map only makes the root file accesible (caused by absolute path names)

I have the follwing gulp task to compile my client code: 

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var reactify = require('reactify');

gulp.task('compile', function() {
  return browserify('./public/js/app.js', {transform: reactify, debug: true})
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./public/dist'));
});

The problem is that only the root ./public/js/app.js file is shown up in the source tab in chrome. All files that are required in app.js are missing.

After decompiling the source map data, it seems that only ./public/js/app.js is listed with the relative url, all other files have the absolute url on my machine.

{
    "version": 3,
    "sources": [
        "/Users/andreaskoberle/projects/private/webshell/node_modules/browserify/node_modules/browser-pack/_prelude.js",
        "./public/js/app.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/cockpits/index.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/cockpits/links.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/common/Box.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/common/Grid.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/sidebar.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/webShell/ScriptSelector.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/webShell/ShellOutput.js",
        "/Users/andreaskoberle/projects/private/webshell/public/js/webShell/index.js"
    ],

Upvotes: 3

Views: 2701

Answers (2)

zayquan
zayquan

Reputation: 8052

I have a similar problem except in my case the sourcemap does not even contain absolute paths; it has only one entry for the root file.

My sources from the .map:

"sources":["theSrc/internal_www/js/renderContentPage.js"]

And my gulp task:

gulp.task('compileRenderContentPage', function () {

    var b = browserify({
      entries: 'theSrc/internal_www/js/renderContentPage.js',
      debug: true
    });

    return b.transform(babelify, { presets: ['es2015'] })
      .bundle()
      .pipe(source('renderContentPage.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init({loadMaps: true}))
      .on('error', gutil.log)
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./browser/js/'));
});

haven't figures out the issue yet

Upvotes: 1

Andreas Köberle
Andreas Köberle

Reputation: 110892

The problem are the absolute paths in the source map. Using mold-source-map in my gulp task to convert to the absolute paths to relative ones, fix the issue: 

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var reactify = require('reactify');
var mold = require('mold-source-map')

gulp.task('compile', function() {
  return browserify('./public/js/app.js', {transform: reactify, debug: true})
    .bundle()
    .pipe(mold.transformSourcesRelativeTo('./'))
    .pipe(source('app.js'))
    .pipe(gulp.dest('./public/dist'));
});

Upvotes: 5

Related Questions