2

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 with npx 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.

Here is what I get: enter image description here

  • now go to package.json and change the dependencies of react and react-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:enter image description here

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: enter image description here

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?

0 Answers0