React: Can we locate the line number when react makes a warning like this "Unknown DOM property class. Did you mean className?"

[liuyutao]

Can we locate the line number when react makes a warning like this "Unknown DOM property class. Did you mean className?"

There is no hint about which code made this warning.

[jimfb]

Yes, it is on my todo list.

[mxstbr]

I'd like to take a crack at this @jimfb. What do you imagine the warning is like, full filename/line number in the warning, component name,...?

[jimfb]

@mxstbr Honestly, this probably isn't the greatest first bug, until I first blaze the trail by providing an example that you can replicate. The desired output would be something like MyFileName.js:54

You're welcomed to take a stab at it, but just know that you're probably in for a rough time in terms of a code review. To get an idea of the structure, you will need to look at https://github.com/facebook/react/pull/5590. You will want to emit an event when you start processing the element**, an event when you do an operation (I think that event already exists), and an event when you finish processing the element. Then your devtool can grab the __source off the element (after enabling react-jsx-source) and use that to display the file/line information as part of the error.

** At least, that would be my first approach. An alternate approach is to process the element by replicating the control logic that detects invalid props, but that feels sucky because it relies on two totally separate code paths having the same behavior and never getting out of sync. I'm not sure which approach would ultimately pan out as preferred.

[mxstbr]

You will want to emit an event when you start processing the element, an event when you do an operation (I think that event already exists), and an event when you finish processing the element.

Why do I need three separate events, I thought about using onSetValueForProperty in ReactDOMUnknownPropertyDevtool, and with react-jsx-source add the information to the warning – what am I missing here?

[jimfb]

@mxstbr onSetValueForProperty doesn't have access to the element (so it can't access the source), and passing it the element (or source) would require routing the data through the core internal APIs for the sole purpose of warnings and doesn't make sense from a DOMPropertyOperations API perspective (avoiding that was one of the motivations for moving the warnings into the devtools - we want to cleanup the core internals, which currently pass data allover the place).

[mxstbr]

Fair enough, makes sense. I'll leave this to you then – if you have anything to do that might be a better first bug, ping me!

[jimfb]

@mxstbr We have a whole list of recommended ones here: https://github.com/facebook/react/labels/good%20first%20bug

In particular, these jumped out at me: https://github.com/facebook/react/issues/5839 https://github.com/facebook/react/issues/6049 https://github.com/facebook/react/issues/1858

[mxstbr]

1858 was done in #2065 and can be closed, #5839 has an open PR at #5861 and tleunen reserved #6049. I'll keep a lookout at the list though!

[gaearon]

We do have the line numbers for this now if you enable this transform in development. It's already included by default with Create React App.

[Domiii]

Just tried out babel-plugin-transform-react-jsx-source, and it works! Thanks so much @gaearon!

"How to display line numbers in React render errors?" - The answer to that question should be in every React beginner tutorial, if not shown in the error message itself!

[gaearon]

Well, we do recommend using Create React App in beginner tutorials, including those we have on our own website.