diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js index 543b74d1b17f9..ba4f87f66fe9e 100644 --- a/packages/react/src/ReactElementValidator.js +++ b/packages/react/src/ReactElementValidator.js @@ -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'; @@ -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; } diff --git a/packages/react/src/__tests__/ReactElementValidator-test.internal.js b/packages/react/src/__tests__/ReactElementValidator-test.internal.js index cb9a9eaa0401a..6f881825f845b 100644 --- a/packages/react/src/__tests__/ReactElementValidator-test.internal.js +++ b/packages/react/src/__tests__/ReactElementValidator-test.internal.js @@ -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 ' + @@ -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:
. 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: