Browserify and Reactify source maps include full local path names

Question

I use watchify/ browserify to create a bundle with debug source maps with this command-

watchify main.js -o bundle.js -v -d 

When I use Chrome DevTools to debug the resulting app, the source files are accessible in their orginal nested folder locations, visible in DevTools' Sources panel.

However when I run it through reactify with this command-

watchify main.js -t reactify -o bundle.js -v -d

Chrome DevTools shows all the source files in the same folder as bundle.js and the file name includes the full local path name.

I am finding this annoying and hard to identify the correct file both in the sources panel and in the individual tabs as the file is too long to display.

Does anyone know how to get around this so that the source files display in their original folder locations (as per pic 1). Thx

Answer 1

You need specify the --full-paths option for browserify as false

See: https://github.com/substack/node-browserify#usage

watchify main.js -t reactify -o bundle.js -v -d --full-paths=false