javascriptreactjsbrowserifywatchifyreactify

Browserify and Reactify source maps include full local path names

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.

enter image description here

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.

enter image description here

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

Solution

  • 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