Confusing error message when passing non string, non component class to React.createElement

[andreypopp]

The following code:

var X = true;
var Hello = React.createClass({
    render: function() {
        return <X>Hello {this.props.name}</X>;
    }
});

produces

Uncaught TypeError: undefined is not a function

deep into React.

http://jsfiddle.net/92env5pj/1/

[zpao]

Yea, we can do better than that. On the plus side, looks like this error will actually log as TypeError: type.toUpperCase is not a function in the near future (does for me in my browsers: Firefox Nightly, Chrome beta).

We should be able to catch this in createElement. Strings are ok. Functions are ok (I think, or will be). Objects with certain characteristics are ok (has a render function?)

[sophiebits]

No objects, just functions that return objects with a render function. I thought we had a warning for this already though.

[zpao]

We just look for != null. https://github.com/facebook/react/blob/master/src/classic/element/ReactElementValidator.js#L399-L407

[grant]

Sorry for all the references above. Let me know how this PR looks.

[kdamball]

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.

[tomef]

@kdamball 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 require further up the component hierarchy than it was actually being used. Once I removed the extra require 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

[kdamball]

@bodjkin 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.

[cosmith]

Thanks @bodjkin, you saved me a lot of time ;) I had simply forgotten to add the module.exports = ... on a react component. I agree that this error is pretty confusing, even with the TypeError: type.toUpperCase is not a function message (which is what I got).

[johntyree]

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...

[sophiebits]

@cosmith @johntyree Did you see a warning in the console logged before the exception was thrown? There should be one.

React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).

[johntyree]

@spicyj good question. It was probably there, but I don't recall now. Why would that be a warning and not an exception itself?

[sophiebits]

For this case specifically, it's because we want to be able to inline calls to React.createElement (#3228) without changing runtime behavior which we can do only if createElement never throws.

[johntyree]

Can it be made to only throw when not in production? 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.

[infolock]

Not sure if this will help someone in the future, but another way to get this same error ( Uncaught TypeError: type.toUppercase is not a function) is by referencing a component that hasn't been added to module exports.

So this will throw the error mentioned:

const React = require( 'react' );
class MyComponent extends React.Component {
  //.... 
}

This will fix it:

const React = require( 'react' );
class MyComponent extends React.Component {
  //.... 
}

module.exports = MyComponent;

[sophiebits]

Hopefully we can make the toUpperCase error a little less cryptic. Just posted #4154.

[infolock]

very nice 👍

[ibrahim12]

I was trying to do React.renderToString(<Element />) and was getting this error.
Later found that, Element has inline css display:none entry at its root

. After Removing the entry it has been fixed.

[runrevben]

I'm struggling with this error too. Any pointers?

Here is my main app:

var React = require('react');
var TestComponent = require('./components/TestComponent.jsx');
React.render(<TestComponent />, document.getElementById('id'));

And here is my testcomponent.jsx:

var React = require('react');

var TestComponent = React.createClass({
  render: function() {
    return (
      <h1>asdfasdf</h1>
    );
  }
});

module.export = TestComponent;

I'm using the latest version of rect, reactify and browserify to compile

[ibrahim12]

@runrevben In your testcomponent.jsx file check the exports line , there is a typo I guess, It should be module.exports=TestComponent;

[runrevben]

@ibrahim12 Thank you! You saved me much frustration :)

[faria]

@infolock Thank you, that was the source of my bug too.

[kimchicharlie]

I had the same error trying to include a component inside the same component

var Foo = require('./foo.jsx');
var Bar = require('./main.jsx');

var Main = React.createClass({
    render: function() {
        return (
            <div>
                <Foo/>
                <Bar/>
            </div>
        );
    }
})

module.exports = Main;

Error :

TypeError: type.toUpperCase is not a function

[sophiebits]

In 0.14, you'll get something like this message:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.

[tleunen]

hey @spicyj, kinda late on this, but would it be possible to get the name of the invalid component?
Let's say I try to use <MyComponent /> but MyComponent is wrong. Would it be possible to say that it's MyComponent that is failing the test?

Would help finding and fixing the errors

[sophiebits]

This isn't possible without changing the transform, no. You can look at the stack trace to see where the error was.

[Duan112358]

the error is so confused, and difficult to trace the error

[sophiebits]

Folks, I already made the error message better in 0.14. Please stop commenting.

[Duan112358]

👍

[ccorcos]

@infolock Thank you do much!

Not sure if this will help someone in the future, but another way to get this same error ( Uncaught TypeError: type.toUppercase is not a function) is by referencing a component that hasn't been added to module exports.

What a terrible error message!