Webpack hides stack trace from babel errors

Question

I have a relatively standard webpack setting: webpack + babel-stage-0

If there is a syntax error, babel gives me a very useful error message, but also a stack trace, completely unrelated to my code, which is often longer than the terminal itself.

Is there a way to hide stacktrace from Parser.pp.raise

I know this is a very minor thing, but hidden stack tracing will mean less visual noise, and I don't need to scroll half of the terminal window to see my error message.

Things i tried

I tried to hide stderr with:

 webpack --watch > /dev/null 

but he did not seem to help.

Answer 1

I had the same problem, and apparently there are no real solutions. So I came up with a hack:

$ webpack --watch --color | grep -v '^ at .*/node_modules/'

This will filter the webpack output to remove the trace for node_modules, and the --color ensures that grep does not remove your colors.

Answer 2

If you run webpack through an API (e.g. from gulpfile), you can filter exception messages using this one-line interface:

 // filter webpack/babel error traces const filterStackTraces = err => err.toString().split(/[\r\n]+/).filter(line => ! line.match(/^\s+at Parser/)).join(os.EOL); // example use: compiler.run( (err, stats) => { if (err) return done( new gutil.PluginError('webpack', err)); if ( stats.hasErrors() ) { const statDetails = stats.toJson({errorDetails: false}); // print out parse errors statDetails.errors.forEach((e) => gutil.log(error(tag), filterStackTraces(e))); return done(new gutil.PluginError('webpack', 'Parse/ build error(s)')); } gutil.log(gutil.colors.green(tag), stats.toString({colors: true})); done(); }); 

It will remove the stack trace without touching the error message and the original context fragment, and leave the colors intact.