在 Chrome 开发者控制台中显示文件名而不是块

Question

当我的 React 17 应用程序出现错误时，Chrome 开发者控制台会显示块文件路径的错误，而不是包含有错误的组件的实际源文件。是否可以显示真实的文件路径而不是块？我已经检查过，所有文件都有为它们生成的源映射。

\n

样本错误

\n

index.js:1 Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted \xe2\x80\x94 the behavior is unsupported and could change in a future version.\n    at tr\n    at http://localhost:3000/static/js/vendors~main.chunk.js:1363:73\n    at TableRow (http://localhost:3000/static/js/vendors~main.chunk.js:42348:84)\n    at thead\n    at http://localhost:3000/static/js/vendors~main.chunk.js:1363:73\n    at TableHead (http://localhost:3000/static/js/vendors~main.chunk.js:41463:84)\n    at HeadTable (http://localhost:3000/static/js/4.chunk.js:504:21)\n    at table\n    ......\n\n

\n

期望结果的样本

\n

index.js:1 Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted \xe2\x80\x94 the behavior is unsupported and could change in a future version.\n    at tr\n    at ./src/components/Table.tsx:1363:73\n    ......\n\n

\n

Answer 1

查看 React 的错误边界页面上的此部分：组件堆栈跟踪

这是一个简短的段落，介绍了使用这个 babel 插件来获得您想要的输出的结果和说明。