When there is an error in my react 17 application, the chrome developer console shows errors to chunks file paths instead of the actual source file containing the component with error. Is it possible to show the real files path instead of chunks? I have checked and all of the files do have a source map generated for them.
Sample error
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 — the behavior is unsupported and could change in a future version.
at tr
at http://localhost:3000/static/js/vendors~main.chunk.js:1363:73
at TableRow (http://localhost:3000/static/js/vendors~main.chunk.js:42348:84)
at thead
at http://localhost:3000/static/js/vendors~main.chunk.js:1363:73
at TableHead (http://localhost:3000/static/js/vendors~main.chunk.js:41463:84)
at HeadTable (http://localhost:3000/static/js/4.chunk.js:504:21)
at table
......
Sample of desired result
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 — the behavior is unsupported and could change in a future version.
at tr
at ./src/components/Table.tsx:1363:73
......
Check out this section on React's Error Boundaries page: Component Stack Traces
It is a brief paragraph going over the result and instructions for using this babel plugin to get the output you desire.
In development if you are using the React Development Tool in your Chrome Brower or Firefox you will be able to view the source code of your app and all its components.
If you want to see your React Redux state, I'd recommend React Redux Development Tool as well.