Create-react-app: Error overlay eats the original stack for console.error()

[gaearon]

Just noticed this:

It's pretty hard to debug where this is coming from. We should at the very least capture the stack and add it to the message.

[Timer]

2.0 or 1.x?

[Timer]

I also noticed this 10/10 error message:

Reproduces with:

import React, { Component } from 'react'

class App extends Component {
  state = { field: 'abc' }
  render() {
    const {
      state: { field, field },
    } = this
    return <div>{field}</div>
  }
}

export default App

[gaearon]

1.x

[gaearon]

If you leave code for long enough it rots, seemingly!

[jimbojetlag]

I've been wasting 6 hours before I found this issue. Clearly [email protected] was not ready to release.

I'm back to [email protected]. Please update the roadmap issue to save other souls.

[gaearon]

@jimbojetlag This issue is about 1.x.

[gaearon]

(Well, it applies to 2.x too, but it's not new.)

[jimbojetlag]

@gaearon I got that 10/10 error with no error description with 2.0.0-next.3e165448, after I rolled back to 2.0.0-next.66cc7a90 , I can see the error description, which is Support for the experimental syntax 'classProperties' isn't currently enabled, which I thought has been fixed in that version.

[Timer]

I added this to the list of known issues on the alphas. @jimbojetlag, please remember that these are alpha releases not meant for production use cases / other than for testing purposes.

[jimbojetlag]

@Timer thanks, could you provide a reference to it?

[Timer]

https://github.com/facebook/create-react-app/issues/3815

[RIP21]

Hey guys. I did a little debugging and it seems to be an issue in formatWebpackMessages.js

// Remove unnecessary stack added by `thread-loader`
  var threadLoaderIndex = -1;
  lines.forEach(function(line, index) {
    if (threadLoaderIndex !== -1) {
      return;
    }
    if (/thread.loader/i.test(line)) {
      threadLoaderIndex = index;
    }
  });

  if (threadLoaderIndex !== -1) {
    lines = lines.slice(0, threadLoaderIndex);
  }

This piece is deletes everything after 'thread-loader'. So when you have an error or warning it will be striped out to the path only.
So message like that:

./src/elements/FormSignIn/index.js
Module Warning (from ./node_modules/thread-loader/dist/cjs.js): <<<< Takes this line index

/Users/andriilos/Projects/<annon>/<annon>/src/elements/FormSignIn/index.js
  6:13  warning  'UI' is defined but never used              no-unused-vars
  9:7   warning  'sleep' is assigned a value but never used  no-unused-vars

✖ 2 problems (0 errors, 2 warnings)

 @ ./src/pages/SignIn/index.js 1:2249-2293 1:3910-3920
 @ ./src/App.js
 @ ./src/index.js
 @ multi ./node_modules/revolut-react-scripts/config/polyfills.js ./src/index.js <<< removes all till that line

End up like:

./src/elements/FormSignIn/index.js

So effectively changing

if (threadLoaderIndex !== -1) {
    lines = lines.slice(0, threadLoaderIndex);
  }

May fix this.

[gaearon]

@RIP21 I think this thread is about a different problem. :-)
Can you please post a new issue with your suggestion? Thanks.

[RIP21]

@gaearon sorry :) Thought that this is a topic about Failed to compile case :)
Will do!

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.