Better errors in console after compiling scripts using Webpack

Question

I've stumbled across it a couple of times now, where I get an error in the console, and I'm unable to figure out where it origins, without wild guesses. Such as this error here:

I can see that there are this NPM-package here that shows better Webpack-errors, when compiling. But I'm looking for something that makes it easier to track errors in the console, to the part of the code that triggers it.

Like this above-displayed error. Why is it, that it doesn't pass the string, that it's trying to pass as an SVG? I've clicked all the links displayed on the error, but the one that comes closest to helping is the last line, which is the function being executed when the viewport is resized.

Are there a way, where I easier can shine light on, what causes the given error?

---

Addition1:

Or an error like this:

Why not write the line, where the 'null target' is fetched, so the developer has something to work with. It's like saying: 'Somewhere in your code there is a null target'. Go figure it out. :-/

I know that it is a tall order, - but am I the only one with this problem?

Answer 1

@Zeth, I think you're looking for source maps! It will point from the line in your compiled output, to the line in your source files.

Check these out for more information:

• https://webpack.js.org/configuration/devtool/
• https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map