Change:
The following code: produces deep into React.
Yea, we can do better than that. On the plus side, looks like this error will actually log as in the near future (does for me in my browsers: Firefox Nightly, Chrome beta). We should be able to catch this in . Strings are ok. Functions are ok (I think, or will be). Objects with certain characteristics are ok (has a render function?)
No objects, just functions that return objects with a render function. I thought we had a warning for this already though.
We just look for .
Sorry for all the references above. Let me know how looks.
I'm still getting this error (I just installed the latest react version). Any ideas why it happens? Everything else bundles rather alright with browserify but the main client script doesn't run and flags with this error.
It's a long shot, but I just had the same error, and it turned out to be a component that I was including with further up the component hierarchy than it was actually being used. Once I removed the extra it ran just fine again. If it helps to narrow down the component, the hierarchy was Ancestor ChildList Child ChildList Child... (recursive). The Ancestor component was unnecessarily including the Child component. But again this is pure speculation since the error message was in no way indicative of the solution I found, so the problem in your case may be completely different :) Cheers
Yep, you are right, it was totally my own error. The error reporting should be better though. It seems like frontend scripts are better at this than bundling everything using browserify.
Thanks you saved me a lot of time ;) I had simply forgotten to add the on a react component. I agree that this error is pretty confusing, even with the message (which is what I got).
I just had the same issue that cosmith had. The TypeError really isn't very helpful. The real error is only tangentially related to types...
Did you see a warning in the console logged before the exception was thrown? There should be one.
good question. It was probably there, but I don't recall now. Why would that be a warning and not an exception itself?
For this case specifically, it's because we want to be able to inline calls to React.createElement () without changing runtime behavior which we can do only if createElement never throws.
Can it be made to only throw when not in ? Granted, even I don't like that idea very much... I'm not sure there's a better solution than just emitting a warning before everything explodes. At the end of the day the dev is just going to Google the error because it's completely opaque. Then they'll find this thread or something similar and move on with their lives.
Not sure if this will help someone in the future, but another way to get this same error ( ) is by referencing a component that hasn't been to module exports. So this will throw the error mentioned: This will fix it:
Hopefully we can make the toUpperCase error a little less cryptic. Just posted .
very nice :+1:
I was trying to do and was getting this error. Later found that, Element has inline css entry at its root <div. After Removing the entry it has been fixed.
I'm struggling with this error too. Any pointers? Here is my main app: And here is my I'm using the latest version of rect, reactify and browserify to compile
In your file check the exports line , there is a typo I guess, It should be
Thank you! You saved me much frustration :)
Thank you, that was the source of my bug too.
I had the same error trying to include a component inside the same component Error :
In 0.14, you'll get something like this message:
hey kinda late on this, but would it be possible to get the name of the invalid component? Let's say I try to use but is wrong. Would it be possible to say that it's that is failing the test? Would help finding and fixing the errors
This isn't possible without changing the transform, no. You can look at the stack trace to see where the error was.
the error is so confused, and difficult to trace the error
:+1:
Thank you do much! What a terrible error message!

Discussion:
* @param {ReactElement} element */ function validatePropTypes(element) { <del> if (element.type == null) { </del> <ins> if (!(typeof element.type === 'string' || typeof element.type === 'function')) { </ins> // This has already warned. Don't throw. return; }

createElement: function(type, props, children) { // We warn in this case but don't throw. We expect the element creation to // succeed and there will likely be errors in render. <del> warning( type != null, 'React.createElement: type should not be null or undefined. It should ' + 'be a string (for DOM elements) or a ReactClass (for composite ' + 'components).%s', </del> <ins> warning(typeof type === 'string' || typeof type === 'function', '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', </ins> getDeclarationErrorAddendum() );

); }); <del> it('gives a helpful error when passing null or undefined', function() { </del> <ins> it('gives a helpful error when passing null, undefined, boolean, or number', () => { </ins> spyOn(console, 'error'); React.createElement(undefined); React.createElement(null); <del> expect(console.error.calls.length).toBe(2); </del> <ins> React.createElement(true); React.createElement(123); expect(console.error.calls.length).toBe(4); </ins> expect(console.error.calls[0].args[0]).toBe( <del> 'Warning: React.createElement: type should not be null or undefined. ' + 'It should be a string (for DOM elements) or a ReactClass (for ' + 'composite components).' </del> <ins> '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).' </ins> ); expect(console.error.calls[1].args[0]).toBe( <del> 'Warning: React.createElement: type should not be null or undefined. ' + 'It should be a string (for DOM elements) or a ReactClass (for ' + 'composite components).' </del> <ins> '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).' ); expect(console.error.calls[2].args[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).' ); expect(console.error.calls[3].args[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).' </ins> ); React.createElement('div'); <del> expect(console.error.calls.length).toBe(2); </del> <ins> expect(console.error.calls.length).toBe(4); </ins> }); <del> it('includes the owner name when passing null or undefined', function() { </del> <ins> it('includes the owner name when passing null, undefined, boolean, or number', () => { </ins> spyOn(console, 'error'); var ParentComp = React.createClass({ render: function() {

}).toThrow(); expect(console.error.calls.length).toBe(2); expect(console.error.calls[0].args[0]).toBe( <del> 'Warning: React.createElement: type should not be null or undefined. ' + 'It should be a string (for DOM elements) or a ReactClass (for ' + 'composite components). Check the render method of `ParentComp`.' </del> <ins> '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`.' </ins> ); expect(console.error.calls[1].args[0]).toBe( 'Warning: Only functions or strings can be mounted as React components.'

); }); <del> it('gives a helpful error when passing null or undefined', function() { </del> <ins> it('gives a helpful error when passing null, undefined, or boolean', () => { </ins> var Undefined = undefined; var Null = null; <ins> var True = true; var Num = 123; </ins> var Div = 'div'; spyOn(console, 'error'); <Undefined />; <Null />; <del> expect(console.error.calls.length).toBe(2); </del> <ins> <True />; <Num />; expect(console.error.calls.length).toBe(4); </ins> expect(console.error.calls[0].args[0]).toContain( <del> 'type should not be null or undefined. It should be a string (for ' + 'DOM elements) or a ReactClass (for composite components).' </del> <ins> 'type should not be null, undefined, boolean, or number. It should be ' + 'a string (for DOM elements) or a ReactClass (for composite components).' </ins> ); expect(console.error.calls[1].args[0]).toContain( <del> 'type should not be null or undefined. It should be a string (for ' + 'DOM elements) or a ReactClass (for composite components).' </del> <ins> '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[2].args[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[3].args[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).' </ins> ); <Div />; <del> expect(console.error.calls.length).toBe(2); </del> <ins> expect(console.error.calls.length).toBe(4); </ins> }); it('should check default prop values', function() {