11

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
    ......
zdarsky.peter
  • 6,188
  • 9
  • 39
  • 60
  • You are using CRA ? – Fiodorov Andrei Dec 01 '21 at 14:44
  • Yes, so it could be nice to resolve this without doing `react-scripts eject` – Bogy Dec 01 '21 at 16:29
  • If you do a fresh install of CRA into a new directory, do you still have this behavior? Have you added any advanced configuration to your CRA? On my end, with a fresh CRA, I see relative paths in Chrome dev tools for warnings and errors. – sallf Dec 08 '21 at 00:31

3 Answers3

0

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.

Jacob
  • 1,697
  • 8
  • 17
0

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.

Caio Mar
  • 2,344
  • 5
  • 31
  • 37
0

you have to modify your webpack.config to enable source mapping, look at this post Console logging error on bundle.js instead of React component

Julian Gr
  • 93
  • 1
  • 9