Pete's Log: create-react-app Doesn't Include Filenames in TypeScript Error Messages
Entry #2109, (Coding, Hacking, & CS stuff, Work)(posted when I was 43 years old.)
Maybe it's just me, but I like when compiler error messages include the name of the file that generated the error.
For a little while now, React apps I've been working on haven't been doing that. Today I was working on updating some apps to the latest react-scripts (5.0.1) and since I was still seeing the issue decided to track it down.
Running the TypeScript compiler gave me the same errors as the React build script, but with the filename included. So I started digging into the React build script.
What I found was that the React build script has a formatWebpackMessages function to pretty-print the errors and warnings generated by Webpack. And Webpack recently switched from returning messages as simple strings to returning them as objects. And in the case of TypeScript errors, the message property of the object doesn't include the filename. Instead, the filename is in the file property.
The formatWebpackMessages function was recently updated to treat the message as an object instead of as a string, but it only looks at the message property. And from what I can tell, in non-TypeScript errors (e.g. basic JavaScript syntax errors), the message property includes the filename. But in the case of TypeScript errors, it doesn't.
I opened an issue for this problem. In the meanwhile, I can patch the code locally to include the file property. So I have a workaround.
Which is good, since we're a week short of the one year anniversary of the last React issue I opened (which I wrote about here) and it's still open. And since I'm looking at the latest create-react-app 5.0.1, I confirmed that issue still exists there as well. Good thing I have a workaround for that one too.