A more descriptive createElement warning #7402

jin · 2016-08-02T07:28:57Z

This PR creates a doc to explain the possible causes of a createElement warning when used with invalid types.

zpao · 2016-08-02T22:16:28Z

src/isomorphic/classic/element/ReactElementValidator.js

@@ -192,7 +192,8 @@ var ReactElementValidator = {
      validType,
      '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).%s',
+        '(for composite components). See ' +
+        'https://facebook.github.io/react/warning/create-element-types.html%s',


I haven't read the actual proposal but assuming we move forward, 2 things:

Please use a short url, we can hook that up later. Let's say fb.me/react-warning-create-element or something similar.

The url should be the last thing in the message so we should have the %s before it.

👍 will do

jamesblight · 2016-08-03T05:53:54Z

The original issue mentions showing a better message when the type is undefined. Currently the same error message is shown when the type is null, undefined, bool or a number.

You could check for a type of undefined and show a better error message like:

Warning: React.createEelement: type should not be undefined.
It should be a string (for DOM elements) or a ReactClass (for composite components).
Did you mistype an import or forget to export your component?

Jessidhia · 2016-08-03T05:58:16Z

or a React.Component, or a React.PureComponent, or a SFC...

There are lots of things that could be valid components :(

gaearon · 2016-08-19T12:11:55Z

src/isomorphic/classic/element/ReactElementValidator.js

@@ -192,7 +192,8 @@ var ReactElementValidator = {
      validType,
      '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).%s',


Instead of just adding a link here, I would rather add a separate condition checking specifically for undefined and add a more descriptive message for that case. This is the case with most bundlers using Babel: you get undefined when you misspell an import.

…ement. Main changes: For an `undefined` component, the following message is shown: ``` Warning: React.createElement: undefined is an invalid value for a type. It should be a string (for DOM elements), ReactClass or React.Component (for composite components). Did you mistype an import or forget to export your component? See fb.me/react-warning-create-element for more information. ``` For other types, the value is shown with a shorter message: ``` Warning: React.createElement: 42 is an invalid value for a type. It should be a string (for DOM elements), ReactClass or React.Component (for composite components). See fb.me/react-warning-create-element for more information. ``` Also added a new example case of an invalid usage of React.createElement.

jin · 2016-08-28T23:41:11Z

Addressed everyone's feedback (thanks!). The error message now shows the value of the invalid type. Also, if it's undefined, an additional message to verify import/export correctness is also displayed (thanks @jamesblight)

Docs has also been updated with one more example, showcasing an invalid usage of createElement.

gaearon · 2016-08-29T10:01:36Z

src/isomorphic/classic/element/ReactElementValidator.js

-        getDeclarationErrorAddendum()
-      );
+    var validType = true;
+    var warnInvalidType = function(inputValue) {


It can be expensive to create closures in such a hot path. Can you please hoist that function outside createElement()?

gaearon · 2016-09-03T23:22:22Z

src/isomorphic/classic/element/ReactElementValidator.js

+      'It should be a string (for DOM elements), ReactClass or '+
+      'React.Component (for composite components). ' +
+      'Did you mistype an import or forget to export your component?' +
+      '%s See fb.me/react-warning-create-element for more information.',


Please write http://fb.me/... instead.

gaearon · 2016-09-03T23:26:07Z

Thanks! I left a few comments.

jin · 2016-09-04T00:06:39Z

@gaearon Done - thank you for the comments!

gaearon · 2016-09-04T00:07:24Z

src/isomorphic/classic/element/ReactElementValidator.js

+      false,
+      'React.createElement: undefined is an invalid element type. ' +
+      'Did you mistype an import or forget to export your component? ' +
+        'It should be a string (for DOM elements), component ' +


Unnecessary extra indentation here and below. Let's keep lines aligned.

coveralls · 2016-09-04T00:14:20Z

Coverage increased (+0.004%) to 87.196% when pulling 056666d on jin:master into a09d158 on facebook:master.

gaearon · 2016-09-04T00:15:10Z

docs/warnings/invalid-element-type.md

+let Foo, Bar;
+
+if (false) {
+  Foo = () => <div />;


People reading this might not understand arrow functions. I would avoid them here.

gaearon · 2017-01-09T14:50:04Z

This was fixed in #8612, and is being further improved in #8495.
Thanks for starting the effort!

jin added 2 commits August 2, 2016 00:15

Added docs for createElement invalid type warning

3d1187e

Fixed ReactElementValidator tests to test with new warning label

b9dba9e

ghost added GH Review: review-needed CLA Signed labels Aug 2, 2016

Fixed stateless function declaration

e782ed5

gaearon self-assigned this Aug 2, 2016

ghost added the CLA Signed label Aug 2, 2016

zpao reviewed Aug 2, 2016
View reviewed changes

aweary mentioned this pull request Aug 12, 2016

Better error message on ReactElementValidator type error #7485

Closed

gaearon reviewed Aug 19, 2016
View reviewed changes

gaearon added GH Review: needs-revision and removed GH Review: review-needed labels Aug 19, 2016

ghost added the CLA Signed label Aug 19, 2016

jin added 3 commits August 25, 2016 01:15

Fixed merge conflicts

914f535

Merge branch 'master' of https://github.com/facebook/react

c08f81d

Merge branch 'master' of https://github.com/facebook/react

037818b

ghost added GH Review: review-needed CLA Signed and removed GH Review: needs-revision labels Aug 28, 2016

ghost added the CLA Signed label Aug 28, 2016

gaearon reviewed Aug 29, 2016
View reviewed changes

gaearon added GH Review: accepted and removed GH Review: review-needed labels Aug 29, 2016

gaearon reviewed Sep 3, 2016
View reviewed changes

gaearon added GH Review: needs-revision and removed GH Review: review-needed labels Sep 3, 2016

ghost added the CLA Signed label Sep 3, 2016

Addressed Dan's feedback

056666d

ghost added GH Review: review-needed and removed GH Review: needs-revision labels Sep 4, 2016

gaearon reviewed Sep 4, 2016
View reviewed changes

ghost added the CLA Signed label Sep 4, 2016

jin mentioned this pull request Sep 5, 2016

Make createElement(undefined) warning more descriptive #7307

Closed

gaearon closed this Jan 9, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A more descriptive createElement warning #7402

A more descriptive createElement warning #7402

jin commented Aug 2, 2016

zpao Aug 2, 2016

jin Aug 21, 2016 •

edited

Loading

jamesblight commented Aug 3, 2016

Jessidhia commented Aug 3, 2016

gaearon Aug 19, 2016

jin commented Aug 28, 2016

gaearon Aug 29, 2016

gaearon Sep 3, 2016

gaearon commented Sep 3, 2016

jin commented Sep 4, 2016

gaearon Sep 4, 2016

coveralls commented Sep 4, 2016

gaearon Sep 4, 2016

gaearon commented Jan 9, 2017

A more descriptive createElement warning #7402

A more descriptive createElement warning #7402

Conversation

jin commented Aug 2, 2016

zpao Aug 2, 2016

Choose a reason for hiding this comment

jin Aug 21, 2016 • edited Loading

Choose a reason for hiding this comment

jamesblight commented Aug 3, 2016

Jessidhia commented Aug 3, 2016

gaearon Aug 19, 2016

Choose a reason for hiding this comment

jin commented Aug 28, 2016

gaearon Aug 29, 2016

Choose a reason for hiding this comment

gaearon Sep 3, 2016

Choose a reason for hiding this comment

gaearon commented Sep 3, 2016

jin commented Sep 4, 2016

gaearon Sep 4, 2016

Choose a reason for hiding this comment

coveralls commented Sep 4, 2016

gaearon Sep 4, 2016

Choose a reason for hiding this comment

gaearon commented Jan 9, 2017

jin Aug 21, 2016 •

edited

Loading