Create-react-app: react-error-overlay should show the value of variables involved in an error

[cheapsteak]

Context

@rohannair shared an error message that stumped all the developers in Toronto (or at least the ones on TorontoJS)

Everyone, including some rather senior React developers across a few companies, thought it was a messed up import; we've all seen plenty of those

When we confirmed, double confirmed, and triple confirmed that wasn't it, we asked if there was any way to rewrite/cut down that component so the error goes away. Nope

We wondered if it was something funky with caching, but he'd already tried recloning the repo and installing from scratch

When we ran out of threads to pull on, we harped on the usage of dangerously setting html, but that obviously wasn't the culprit (and they had good reasons to use that for his project)

Turns out it was just a typo

What happened

Most of us likely assumed that the value was undefined, and went down the wrong debugging path
In hindsight, it's incredibly significant that the error message said react__WEBPACK_IMPORTED_MODULE_3__default.a.createElement(...) is not a function, instead of react__WEBPACK_IMPORTED_MODULE_3__default.a.createElement is not a function, but it was too tempting to focus on react__WEBPACK_IMPORTED_MODULE_3__default.a.createElement, and (...) was too easy to ignore

Possible solution

It would be incredibly helpful if, in addition to telling us what a variable _isn't_, that we also see what it _is_

If we saw something like

react__WEBPACK_IMPORTED_MODULE_3__default.a.createElement(...) is not a function, its value is {$$typeof: Symbol(react.element), type: ƒ, key: null, ref: null, props: {…}, …}

We would immediately snap to thinking "why are we trying to call an object as a function"?

[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.