Skip to content

Commit

Permalink
Improve error messages for invalid element types (#8612)
Browse files Browse the repository at this point in the history 
(cherry picked from commit eca5b1d)
  • Loading branch information
@sophiebits @gaearon
sophiebits authored and gaearon committed Jan 6, 2017
1 parent d93ceda commit d2039d7
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 50 deletions.
32 changes: 25 additions & 7 deletions src/isomorphic/classic/element/ReactElementValidator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,13 +187,31 @@ var ReactElementValidator = {
// We warn in this case but don't throw. We expect the element creation to
// succeed and there will likely be errors in render.
if (!validType) {
warning(
false,
'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',
getDeclarationErrorAddendum()
);
if (
typeof type !== 'function' &&
typeof type !== 'string'
) {
var info = '';
if (
type === undefined ||
typeof type === 'object' &&
type !== null &&
Object.keys(type).length === 0
) {
info +=
' You likely forgot to export your component from the file ' +
'it\'s defined in.';
}
info += getDeclarationErrorAddendum();
warning(
false,
'React.createElement: type is invalid -- expected a string (for ' +
'built-in components) or a class/function (for composite ' +
'components) but got: %s.%s',
type == null ? type : typeof type,
info,
);
}
}

var element = ReactElement.createElement.apply(this, arguments);
Expand Down
58 changes: 36 additions & 22 deletions src/isomorphic/classic/element/__tests__/ReactElementValidator-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,35 +289,49 @@ describe('ReactElementValidator', () => {
);
});

it('gives a helpful error when passing null, undefined, boolean, or number', () => {
it('gives a helpful error when passing invalid types', () => {
spyOn(console, 'error');
React.createElement(undefined);
React.createElement(null);
React.createElement(true);
React.createElement(123);
expect(console.error.calls.count()).toBe(4);
React.createElement({x: 17});
React.createElement({});
expect(console.error.calls.count()).toBe(6);
expect(console.error.calls.argsFor(0)[0]).toBe(
'Warning: 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).'
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: undefined. You likely forgot to export your ' +
'component from the file it\'s defined in.'
);
expect(console.error.calls.argsFor(1)[0]).toBe(
'Warning: 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).'
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: null.'
);
expect(console.error.calls.argsFor(2)[0]).toBe(
'Warning: 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).'
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: boolean.'
);
expect(console.error.calls.argsFor(3)[0]).toBe(
'Warning: 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).'
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: number.'
);
expect(console.error.calls.argsFor(4)[0]).toBe(
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: object.'
);
expect(console.error.calls.argsFor(5)[0]).toBe(
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: object. You likely forgot to export your ' +
'component from the file it\'s defined in.'
);
React.createElement('div');
expect(console.error.calls.count()).toBe(4);
expect(console.error.calls.count()).toBe(6);
});

it('includes the owner name when passing null, undefined, boolean, or number', () => {
Expand All @@ -336,10 +350,9 @@ describe('ReactElementValidator', () => {
);
expect(console.error.calls.count()).toBe(1);
expect(console.error.calls.argsFor(0)[0]).toBe(
'Warning: 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). Check the render method of ' +
'`ParentComp`.'
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: null. Check the render method of `ParentComp`.'
);
});

Expand Down Expand Up @@ -537,9 +550,10 @@ describe('ReactElementValidator', () => {
void <Foo>{[<div />]}</Foo>;
expect(console.error.calls.count()).toBe(1);
expect(console.error.calls.argsFor(0)[0]).toBe(
'Warning: 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).'
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: undefined. You likely forgot to export your ' +
'component from the file it\'s defined in.'
);
});

Expand Down
29 changes: 17 additions & 12 deletions src/isomorphic/modern/element/__tests__/ReactJSXElementValidator-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,21 +218,26 @@ describe('ReactJSXElementValidator', () => {
void <True />;
void <Num />;
expect(console.error.calls.count()).toBe(4);
expect(console.error.calls.argsFor(0)[0]).toContain(
'type should not be null, undefined, boolean, or number. It should be ' +
'a string (for DOM elements) or a ReactClass (for composite components).'
expect(console.error.calls.argsFor(0)[0]).toBe(
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: undefined. You likely forgot to export your ' +
'component from the file it\'s defined in.'
);
expect(console.error.calls.argsFor(1)[0]).toContain(
'type should not be null, undefined, boolean, or number. It should be ' +
'a string (for DOM elements) or a ReactClass (for composite components).'
expect(console.error.calls.argsFor(1)[0]).toBe(
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: null.'
);
expect(console.error.calls.argsFor(2)[0]).toContain(
'type should not be null, undefined, boolean, or number. It should be ' +
'a string (for DOM elements) or a ReactClass (for composite components).'
expect(console.error.calls.argsFor(2)[0]).toBe(
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: boolean.'
);
expect(console.error.calls.argsFor(3)[0]).toContain(
'type should not be null, undefined, boolean, or number. It should be ' +
'a string (for DOM elements) or a ReactClass (for composite components).'
expect(console.error.calls.argsFor(3)[0]).toBe(
'Warning: React.createElement: type is invalid -- expected a string ' +
'(for built-in components) or a class/function (for composite ' +
'components) but got: number.'
);
void <Div />;
expect(console.error.calls.count()).toBe(4);
Expand Down
23 changes: 22 additions & 1 deletion src/renderers/shared/stack/reconciler/__tests__/ReactComponent-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,9 @@ describe('ReactComponent', () => {
var X = undefined;
expect(() => ReactTestUtils.renderIntoDocument(<X />)).toThrowError(
'Element type is invalid: expected a string (for built-in components) ' +
'or a class/function (for composite components) but got: undefined.'
'or a class/function (for composite components) but got: undefined. ' +
'You likely forgot to export your component from the file it\'s ' +
'defined in.'
);

var Y = null;
Expand All @@ -340,4 +342,23 @@ describe('ReactComponent', () => {
expect(console.error.calls.count()).toBe(2);
});

it('includes owner name in the error about badly-typed elements', () => {
spyOn(console, 'error');

function Foo() {
var X = undefined;
return <X />;
}

expect(() => ReactTestUtils.renderIntoDocument(<Foo />)).toThrowError(
'Element type is invalid: expected a string (for built-in components) ' +
'or a class/function (for composite components) but got: undefined. ' +
'You likely forgot to export your component from the file it\'s ' +
'defined in. Check the render method of `Foo`.'
);

// One warning for each element creation
expect(console.error.calls.count()).toBe(1);
});

});
35 changes: 27 additions & 8 deletions src/renderers/shared/stack/reconciler/instantiateReactComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,33 @@ function instantiateReactComponent(node, shouldHaveDebugID) {
instance = ReactEmptyComponent.create(instantiateReactComponent);
} else if (typeof node === 'object') {
var element = node;
invariant(
element && (typeof element.type === 'function' ||
typeof element.type === 'string'),
'Element type is invalid: expected a string (for built-in components) ' +
'or a class/function (for composite components) but got: %s.%s',
element.type == null ? element.type : typeof element.type,
getDeclarationErrorAddendum(element._owner)
);
var type = element.type;
if (
typeof type !== 'function' &&
typeof type !== 'string'
) {
var info = '';
if (__DEV__) {
if (
type === undefined ||
typeof type === 'object' &&
type !== null &&
Object.keys(type).length === 0
) {
info +=
' You likely forgot to export your component from the file ' +
'it\'s defined in.';
}
}
info += getDeclarationErrorAddendum(element._owner);
invariant(
false,
'Element type is invalid: expected a string (for built-in components) ' +
'or a class/function (for composite components) but got: %s.%s',
type == null ? type : typeof type,
info,
);
}

// Special case string values
if (typeof element.type === 'string') {
Expand Down

0 comments on commit d2039d7

Please sign in to comment.