React: Make createElement(undefined) warning more descriptive

[gaearon]

Update: claimed by @jin

This is what I see when I mistype an import:

This is not very useful.

When type is undefined, we should provide a better message. In 95% of cases it is caused by an invalid import. We should create a page explaining common cases how this could happen (e.g. mismatching default/named export, forgetting to export the component, or importing a non-existing named export), and link to that page from the warning.

[gaearon]

If you intend to work on this, please write in a comment here. The change to the code is very small so most of the effort would be spent on creating a good warning page explaining common problems and solutions.

Here is an example of such warning page: https://github.com/facebook/react/blob/master/docs/warnings/legacy-factories.md. This one would be similar (but about a different topic).

[jin]

Can I look into this?

[gaearon]

Sure!

[gaearon]

I’m “assigning” myself so I keep track of this issue but it’s yours.

[Pajn]

Please include a stacktrace!
This is the worst possible message to get after doing a big merge as there are absolutely nothing to guide you to where the problem can be.

[jin]

@Pajn Will do! I'm bitten by the lack of information many times too, especially when dealing with HOC.

Edit 7/26: didn't manage to find time last week to work on this, but will be doing that this week

[zpao]

Similar: #7215.

[gaearon]

@jin Any updates? If you’re too busy, it’s fine—just let us know and we’ll ask somebody else to look into this!

[jin]

@gaearon Really sorry for losing track of this - please free this up for someone else. Took me a little too long to digest the React source.

[gaearon]

@jin Anything we can help you with? This should only involve changing these few lines. Also would love to hear your feedback on the confusing parts of the codebase.

[alexzherdev]

I can pick this up if you guys decide this needs a fresh pair of eyes.

[jin]

@gaearon Actually, I'm done with changing that warning to link to a warning docs page. Right now, I'm primarily blocked with coming up with the different examples/scenarios that the issue can occur in, on top of the ones you've mentioned.

The codebase isn't confusing per se, it's the part of transforming my understanding from actual applications of React to the underlying implementations of them.

[jin]

@gaearon done! Happy to hear any feedback.

[Wilfred]

As discussed in #7485, I think we should also report /what/ value we saw, rather than just a list of forbidden types. Compare

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

with:

Warning: React.createElement: 5 is an invalid value for type. It should be a string (for DOM elements) or a ReactClass (for composite components).

[jin]

Hi all, really really sorry for the delayed response: I'm moving between cities these couple of weeks, haven't had the chance to sit down to address the feedback yet.

I expect the move to settle down by the middle of next week, and will resume progress ASAP.

On Aug 13, 2016, at 3:10 AM, Wilfred Hughes [email protected] wrote:

As discussed in #7485, I think we should also report /what/ value we saw, rather than just a list of forbidden types. Compare

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

with:

Warning: React.createElement: 5 is an invalid value for type. It should be a string (for DOM elements) or a ReactClass (for composite components).

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Slruh]

@jin, have you made any progress on this issue? If you are too busy, I would love to take a stab at it.

[jin]

@Slruh Yep! There's some progress here: https://github.com/facebook/react/pull/7402

I'm in the midst of addressing @gaearon's comments, and feel free to suggest any improvements!

[Slruh]

I'll take a look

[gravitypersists]

For me, this error is almost always a chore in finding the component that it's referring to. It'd help if the error message did better to identify that component. Maybe it'd help to display everything known about the element? Such as props, or the location of the element in the component hierarchy (perhaps a parent)?

Warning: React.createElement: undefined is an invalid value for type. It should be a string (for DOM elements) or a ReactClass (for composite components).

<App>
    <Rooter>
        <div>
            <undefined>
             ^^^^^^^^^

Is something like that feasible and desirable?

[syranide]

@gravitypersists It just needs to explicitly say that it is undefined (rather than some obscure error) when React.createElement is called.

[joelseq]

Is this still being worked on or can I maybe try to take a stab at it?

[jin]

@joelseq I totally dropped the ball on this one, sorry! Please take over if
you'd like to!

On Mon, Dec 5, 2016 at 12:26 AM Joel Sequeira [e-mail]
wrote:

Is this still being worked on or can I maybe try to take a stab at it?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/7307#issuecomment-264770782,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVPDiwSsIeKR8BZdYqveR6DP9EOGzBJks5rE6BygaJpZM4JQIG3
.

[churchie317]

Looks like there hasn't been any activity for a few weeks. Anyone mind if I claim this for now?

[gaearon]

I think this was fixed in #8612, and being further improved in #8495.
Thanks for the offer to help though!