I just migrated an app created with create-react-app
from React16 to React17. Where before I had nice errors and warnings in my navigator console, with line number and links, I now have a reference to index.js:1
and not so much info.
I tried to reproduce in a jsfiddle but it does not show the same.
I reduced my problem to the strict minimum. Here is how to reproduce:
- Initialise
create-react-app
withnpx create-react-app test17
- Add a problem to
App.js
, like (this triggers a warning for the unique "key" prop):
<ul>
{['a', 'b', 'c'].map((item) => (
<li>{item}</li>
))}
</ul>
- start and go to the console.
- now go to
package.json
and change the dependencies ofreact
andreact-dom
from^17.0.0
to^16.0.0
- remove
node_modules
directory and re-install (nmp i
) - start the server and go to the console
Here is what I get with React 16:
As you can see, with React 16, I have the line number. And with more complete apps (with react-router
, material-ui
etc...), the links points directly to the error in the right file but now the error gives me that with React17:
I searched for solutions but found only few information or I did not understand it (I found someting about ErrorBoudaries
but I don't think it matches what I'm looking for).
It might be linked to this question but I don't find any suitable answer.
Do you have any idea on how to make the stack trace more readable?