描述bug

在使用最新版本的 create-react-app(5.0.1)创建的 TypeScript 项目中，TypeScript 编译错误不包括发生错误的文件名。这使得跟踪错误变得繁琐。
这个问题的原因似乎是 Webpack 5 如何格式化错误以及 formatWebpackMessages 如何处理这些错误。传递给 formatWebpackMessages.js 中的 formatMessage 的 message 对象包含单独的消息和文件属性，而在 TypeScript 错误的情况下，文件名不在消息属性中，只在文件属性中。
作为解决方法，我将 formatMessage 函数更改为包含文件属性。这有点 hacky,因为首先它会在消息属性中包含文件名的情况下重复文件名，但这让我不必手动搜索文件。
我将第22-23行从

} else if ('message' in message) {
    lines = message['message'].split('\n');

更改为

} else if ('message' in message) {
    lines = message['message'].split('\n');

    if ('file' in message) {
      lines.unshift(message.file);
    }

你尝试恢复依赖项了吗？

不适用

你在用户指南中搜索了哪些术语？

不适用

环境信息

当前 create-react-app 版本：5.0.1
运行位置：C:\Users\prijks\AppData\Local
npm_cache_npx\c67e74de0542c87c
\node_modules\create-react-app
系统：
操作系统：Windows 10 10.0.19042
CPU:(20) x64 Intel(R) Core(TM) i9-10900X CPU @ 3.70GHz
二进制文件：
Node: 16.13.0 - C:\Program Files
odejs\node.EXE
Yarn:未找到
npm:8.1.0 - C:\Program Files
odejs
npmPackages:
react:^18.1.0 => 18.1.0
react-dom:^18.1.0 => 18.1.0
react-scripts:5.0.1 => 5.0.1
npmGlobalPackages:
create-react-app:未找到

重现步骤

1.使用 npx create-react-app react-webpack-message-test --template cra-template-typescript 创建一个新应用
1.向应用中引入一个 TypeScript 错误(例如通过在 App.tsx 中添加无效的导入)- 注意需要 TypeScript 错误而不是语法错误
1.使用 npm run build 进行编译