Browserify source map only makes root file available (caused by absolute pathnames)
I have a 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 the source tab in chrome only shows the root file ./public/js/app.js
. All files that are required in app.js
are missing.
After decompiling the original map data, it seems that only ./public/js/app.js
specified with a relative url, all other files have an 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"
],
source to share
The problem is the absolute paths in the original map. Using mold-source-map in my gulp task to convert to absolute paths to relative, fix the problem:
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'));
});
source to share
I have a similar problem, except in my case the sourcemap doesn't even contain absolute paths; it only has one entry for the root file.
My sources from .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 figured out the problem yet
source to share