Skip to content

Commit

Permalink
More helpful message when passing an element to createElement() (face…
Browse files Browse the repository at this point in the history
…book#13131)

* [facebook#13130] Add a more helpful message when passing an element to createElement()

* better conditional flow

* update after review

* move last condition inside last else clause

* Added test case

* compare 25132typeof to REACT_ELEMENT_TYPE

* runs prettier

* remove unrelated changes

* Tweak the message
  • Loading branch information
DCtheTall authored and segoddnja committed Aug 1, 2018
1 parent 23d3ec7 commit dc2c90a
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 0 deletions.
5 changes: 5 additions & 0 deletions packages/react/src/ReactElementValidator.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
getIteratorFn,
REACT_FORWARD_REF_TYPE,
REACT_FRAGMENT_TYPE,
REACT_ELEMENT_TYPE,
} from 'shared/ReactSymbols';
import checkPropTypes from 'prop-types/checkPropTypes';
import warning from 'shared/warning';
Expand Down Expand Up @@ -286,6 +287,10 @@ export function createElementWithValidation(type, props, children) {
typeString = 'null';
} else if (Array.isArray(type)) {
typeString = 'array';
} else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
typeString = `<${getComponentName(type.type) || 'Unknown'} />`;
info =
' Did you accidentally export a JSX literal instead of a component?';
} else {
typeString = typeof type;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -229,12 +229,17 @@ describe('ReactElementValidator', () => {
});

it('gives a helpful error when passing invalid types', () => {
function Foo() {}
expect(() => {
React.createElement(undefined);
React.createElement(null);
React.createElement(true);
React.createElement({x: 17});
React.createElement({});
React.createElement(React.createElement('div'));
React.createElement(React.createElement(Foo));
React.createElement(React.createElement(React.createContext().Consumer));
React.createElement({$$typeof: 'non-react-thing'});
}).toWarnDev(
[
'Warning: React.createElement: type is invalid -- expected a string ' +
Expand All @@ -256,6 +261,21 @@ describe('ReactElementValidator', () => {
'components) but got: object. You likely forgot to export your ' +
"component from the file it's defined in, or you might have mixed up " +
'default and named imports.',
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: <div />. Did you accidentally export a JSX literal ' +
'instead of a component?',
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: <Foo />. Did you accidentally export a JSX literal ' +
'instead of a component?',
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: <Context.Consumer />. Did you accidentally ' +
'export a JSX literal instead of a component?',
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: object.',
],
{withoutStack: true},
);
Expand Down

0 comments on commit dc2c90a

Please sign in to comment.