More helpful message when passing an element to createElement() (#13131)
* [#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
Dylan Cutler committed
Aug 1, 2018 at 13:45 UTC
c44c2a21614ed2e5d3078dcb24dc7ef086df24be
2 files changed
+25
packages/react/src/ReactElementValidator.js
+5
@@ -19,6 +19,7 @@ import {
19
getIteratorFn,
20
REACT_FORWARD_REF_TYPE,
21
REACT_FRAGMENT_TYPE,
22
+ REACT_ELEMENT_TYPE,
23
} from 'shared/ReactSymbols';
24
import checkPropTypes from 'prop-types/checkPropTypes';
25
import warning from 'shared/warning';
@@ -286,6 +287,10 @@ export function createElementWithValidation(type, props, children) {
287
typeString = 'null';
288
} else if (Array.isArray(type)) {
289
typeString = 'array';
290
+ } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
291
+ typeString = `<${getComponentName(type.type) || 'Unknown'} />`;
292
+ info =
293
+ ' Did you accidentally export a JSX literal instead of a component?';
294
} else {
295
typeString = typeof type;
296
}
packages/react/src/__tests__/ReactElementValidator-test.internal.js
+20
@@ -229,12 +229,17 @@ describe('ReactElementValidator', () => {
229
});
230
231
it('gives a helpful error when passing invalid types', () => {
232
+ function Foo() {}
233
expect(() => {
234
React.createElement(undefined);
235
React.createElement(null);
236
React.createElement(true);
237
React.createElement({x: 17});
238
React.createElement({});
239
+ React.createElement(React.createElement('div'));
240
+ React.createElement(React.createElement(Foo));
241
+ React.createElement(React.createElement(React.createContext().Consumer));
242
+ React.createElement({$$typeof: 'non-react-thing'});
243
}).toWarnDev(
244
[
245
'Warning: React.createElement: type is invalid -- expected a string ' +
@@ -256,6 +261,21 @@ describe('ReactElementValidator', () => {
261
'components) but got: object. You likely forgot to export your ' +
262
"component from the file it's defined in, or you might have mixed up " +
263
'default and named imports.',
264
+ 'Warning: React.createElement: type is invalid -- expected a string ' +
265
+ '(for built-in components) or a class/function (for composite ' +
266
+ 'components) but got: <div />. Did you accidentally export a JSX literal ' +
267
+ 'instead of a component?',
268
+ 'Warning: React.createElement: type is invalid -- expected a string ' +
269
+ '(for built-in components) or a class/function (for composite ' +
270
+ 'components) but got: <Foo />. Did you accidentally export a JSX literal ' +
271
+ 'instead of a component?',
272
+ 'Warning: React.createElement: type is invalid -- expected a string ' +
273
+ '(for built-in components) or a class/function (for composite ' +
274
+ 'components) but got: <Context.Consumer />. Did you accidentally ' +
275
+ 'export a JSX literal instead of a component?',
276
+ 'Warning: React.createElement: type is invalid -- expected a string ' +
277
+ '(for built-in components) or a class/function (for composite ' +
278
+ 'components) but got: object.',
279
],
280
{withoutStack: true},
281
);