Capturing filename/line number in webpack output
I am launching webpack/webpack-dev-server as external tool in WebStorm. It emits errors as two lines in the tool output window, like that:
ERROR in ./src/controls.ts
(50,18): error TS2540: Cannot assign to 'canvasWidth' because ...
Can I capture this with "output filters" to make error messages clickable in WebStorm?
If not, do I have any good alternatives to get all webpack build errors or typescript errors across my entire project? Or, maybe, someone knows a way to force webpack to single line error output to make it easily retreivable with output filters?
Please sign in to leave a comment.
Unfortunately tools output filters don't support relative paths - see https://youtrack.jetbrains.com/issue/IDEA-48163
Thanks!
Can you think of any workaround? For example, I see that WebStorm supports watch mode for Mocha in the latest release, maybe it can do something similar for webpack? Or, maybe, there is a way just to see all TypeScript compilation errors across entire project?
You can see all TypeScript compilation errors across entire project in TypeScript toolwindow - just press Show project errors toggle button on the toolbar:
of course, you need to have TypeScript service enabled in Settings | Languages & Frameworks | TypeScript
Thanks for the pointer. In fact Typescript panel + Inspection results view catch 99% of real issues in my code. So that's might be even better approach for now!
However, in case someone wants to make TS webpack errors clickable, it is probably doable - as I found out - if you provide your own error reporter for ts-loader. You can log them in one line and probably equally easily resolve to absolute path:
https://github.com/TypeStrong/ts-loader (see errorFormatter docs, it is just a one-line function)
I'll probably give it a spin one day as well! :)