diff --git a/docs/warnings/create-element-types.md b/docs/warnings/invalid-element-type.md similarity index 95% rename from docs/warnings/create-element-types.md rename to docs/warnings/invalid-element-type.md index b0f0d89863970..efcda12a098a8 100644 --- a/docs/warnings/create-element-types.md +++ b/docs/warnings/invalid-element-type.md @@ -1,7 +1,7 @@ --- -title: Invalid type for createElement +title: Invalid Element Type Warning layout: single -permalink: warnings/create-element-types.html +permalink: warnings/invalid-element-type.html --- You probably came here because your code is trying to create a ReactElement with an invalid type using JSX or the `React.createElement` API. This usually happens when you have an invalid import statement. diff --git a/src/isomorphic/classic/element/ReactElementValidator.js b/src/isomorphic/classic/element/ReactElementValidator.js index c7b918315f05e..6e95d23508250 100644 --- a/src/isomorphic/classic/element/ReactElementValidator.js +++ b/src/isomorphic/classic/element/ReactElementValidator.js @@ -181,51 +181,36 @@ function validatePropTypes(element) { } function warnInvalidType(inputValue) { - // warning(...) messages need to be string literals. - // If not, we can do a ternary expression to evaluate the need - // for the mistyped import message, and not repeat the message - // twice here. if (inputValue === undefined) { warning( false, - 'React.createElement: %s 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?' + - '%s See fb.me/react-warning-create-element for more information.', - inputValue, getDeclarationErrorAddendum() + '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 ' + + 'class or function (for user-defined components).' + + '%s See https://fb.me/react-invalid-element-type for more information.', + getDeclarationErrorAddendum() ); -} else { + } else { warning( false, - 'React.createElement: %s is an invalid value for a type. ' + - 'It should be a string (for DOM elements), ReactClass or ' + - 'React.Component (for composite components).' + - '%s See fb.me/react-warning-create-element for more information.', - inputValue, getDeclarationErrorAddendum() + 'React.createElement: %s is an invalid element type. ' + + 'It should be a string (for DOM elements), component ' + + 'class or function (for user-defined components).' + + '%s See https://fb.me/react-invalid-element-type for more information.', + inputValue, + getDeclarationErrorAddendum() ); } -}; +} var ReactElementValidator = { createElement: function(type, props, children) { - var validType = true; - - switch (typeof type) { - case 'string': - case 'function': - break; - case 'object': - if (type !== null) { - break; - } - // fallthrough if type is a null - default: - // We warn in this case but don't throw. We expect the element creation to - // succeed and there will likely be errors in render. - validType = false; - warnInvalidType(type); + var validType = typeof type === 'string' || typeof type === 'function' || + (type !== null && typeof type === 'object'); + if (!validType) { + warnInvalidType(type); } var element = ReactElement.createElement.apply(this, arguments); diff --git a/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js b/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js index 4f78d5d2a31dc..92b003bba69a6 100644 --- a/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js +++ b/src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js @@ -297,29 +297,29 @@ describe('ReactElementValidator', function() { React.createElement(123); expect(console.error.calls.count()).toBe(4); expect(console.error.calls.argsFor(0)[0]).toBe( - '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). ' + + 'Warning: React.createElement: undefined is an invalid element type. ' + 'Did you mistype an import or forget to export your component? ' + - 'See fb.me/react-warning-create-element for more information.' + 'It should be a string (for DOM elements), component class or function ' + + '(for user-defined components). ' + + 'See https://fb.me/react-invalid-element-type for more information.' ); expect(console.error.calls.argsFor(1)[0]).toBe( - 'Warning: React.createElement: null 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.' + 'Warning: React.createElement: null is an invalid element type. ' + + 'It should be a string (for DOM elements), component class or function ' + + '(for user-defined components). ' + + 'See https://fb.me/react-invalid-element-type for more information.' ); expect(console.error.calls.argsFor(2)[0]).toBe( - 'Warning: React.createElement: true 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.' + 'Warning: React.createElement: true is an invalid element type. ' + + 'It should be a string (for DOM elements), component class or function ' + + '(for user-defined components). ' + + 'See https://fb.me/react-invalid-element-type for more information.' ); expect(console.error.calls.argsFor(3)[0]).toBe( - 'Warning: React.createElement: 123 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.' + 'Warning: React.createElement: 123 is an invalid element type. ' + + 'It should be a string (for DOM elements), component class or function ' + + '(for user-defined components). ' + + 'See https://fb.me/react-invalid-element-type for more information.' ); React.createElement('div'); expect(console.error.calls.count()).toBe(4); @@ -341,10 +341,10 @@ describe('ReactElementValidator', function() { ); expect(console.error.calls.count()).toBe(1); expect(console.error.calls.argsFor(0)[0]).toBe( - 'Warning: React.createElement: null is an invalid value for a type. ' + - 'It should be a string (for DOM elements), ReactClass or React.Component ' + - '(for composite components). Check the render method of `ParentComp`. ' + - 'See fb.me/react-warning-create-element for more information.' + 'Warning: React.createElement: null is an invalid element type. ' + + 'It should be a string (for DOM elements), component class or function ' + + '(for user-defined components). Check the render method of `ParentComp`. ' + + 'See https://fb.me/react-invalid-element-type for more information.' ); }); @@ -542,11 +542,11 @@ describe('ReactElementValidator', function() { void {[
]}; expect(console.error.calls.count()).toBe(1); expect(console.error.calls.argsFor(0)[0]).toBe( - '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). ' + + 'Warning: React.createElement: undefined is an invalid element type. ' + 'Did you mistype an import or forget to export your component? ' + - 'See fb.me/react-warning-create-element for more information.' + 'It should be a string (for DOM elements), component class or function ' + + '(for user-defined components). ' + + 'See https://fb.me/react-invalid-element-type for more information.' ); }); diff --git a/src/isomorphic/modern/element/__tests__/ReactJSXElementValidator-test.js b/src/isomorphic/modern/element/__tests__/ReactJSXElementValidator-test.js index f50017b143ba3..18c5eea3d1d66 100644 --- a/src/isomorphic/modern/element/__tests__/ReactJSXElementValidator-test.js +++ b/src/isomorphic/modern/element/__tests__/ReactJSXElementValidator-test.js @@ -219,25 +219,25 @@ describe('ReactJSXElementValidator', function() { void ; expect(console.error.calls.count()).toBe(4); expect(console.error.calls.argsFor(0)[0]).toContain( - '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? ' + '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 class or function ' + + '(for user-defined components). ' ); expect(console.error.calls.argsFor(1)[0]).toContain( - 'null is an invalid value for a type. ' + - 'It should be a string (for DOM elements), ReactClass or React.Component ' + - '(for composite components).' + 'null is an invalid element type. ' + + 'It should be a string (for DOM elements), component class or function ' + + '(for user-defined components). ' ); expect(console.error.calls.argsFor(2)[0]).toContain( - 'true is an invalid value for a type. ' + - 'It should be a string (for DOM elements), ReactClass or React.Component ' + - '(for composite components).' + 'true is an invalid element type. ' + + 'It should be a string (for DOM elements), component class or function ' + + '(for user-defined components). ' ); expect(console.error.calls.argsFor(3)[0]).toContain( - '123 is an invalid value for a type. ' + - 'It should be a string (for DOM elements), ReactClass or React.Component ' + - '(for composite components).' + '123 is an invalid element type. ' + + 'It should be a string (for DOM elements), component class or function ' + + '(for user-defined components). ' ); void
; expect(console.error.calls.count()).toBe(4);