React: Making React warn the user when `createElement` is called with `undefined` for the `type` argument

[gabrielecirulli]

I spent the last hour trying to fix an issue that was caused by me trying to render a CSSTransitionGroup when the actual variable was undefined.

The root cause was me misinterpreting that require("react/addons") would return the whole React instead of just React.addons (which is my bad), but the error itself and the stack trace were extremely cryptic and it took me a while to even get a clue that the reason why it wasn't working was that I was just trying to render an undefined type.

This is the actual exception:

Uncaught TypeError: Cannot read property 'defaultProps' of undefined

And here's the stack trace:

You can see that, ultimately, execution comes crashing down when React tries to look at defaultProps on my undefined type, which of course raises an exception.

The reason why this was confusing to me is that the exception happened quite far away from the source cause and, as a secondary factor, this code worked completely fine before I started porting it to Browserify and made my mistake with react/addons. This lead me to a wild set of hypotheses as to why it wasn't working, such as assuming it might be due to a regression in React 0.12 (since it's been migrating from React.renderComponent to React.render and I thought CSSTransitionGroup might have been lagging behind), to thinking it could be a problem with CSSTransitionGroup itself.

The reason why I raise this issue is that, since passing an undefined type won't work anyway, it would make sense if React could check for undefined and warn about it or maybe even raise an exception (since it would crash soon after anyway).

My instance was a bit more extreme and if something like this happens to someone else they'll probably know where they screwed up in the first place, but some help from React would always be welcome!

[johanneslumpe]

Actually require('react/addons') returns the whole react lib + the addons. The addons are just added to the object you'd get if you did require('react'). I've been using browserify the whole time and this error just came up, after updating to 0.12.1. It was working fine before, so it seems kind of weird that it's throwing an error right now. If a dev could comment on this, that'd be great.

[zpao]

@gabrielecirulli Yea, seems like it wouldn't be a bad idea to have a check in createElement.

@johanneslumpe What was working fine before? createElement didn't really exist (it was added in 0.11.x but would likely not have been used). And react/addons has always been the full React object with addons inserted.

[zpao]

Talked it through with @johanneslumpe on IRC, same cause just not via addons. An undefined component was being used.

[gabrielecirulli]

@johanneslumpe Yeah, I became aware of that when I figured out what the issue is, I was just thinking it would have been way more helpful if React had told me straight away that I was passing an undefined component to createElement.

[gaearon]

+1, I also had this issue (albeit for a different reason)

[gabrielecirulli]

Thanks! :+1:

[akkhil7]

If you are giving the whole JSX code under the _script_ tag of the HTML page, then the order of declaration of the components could cause this issue.

When the inbuilt compiler sees a _component_ which you've _later_ declared in the code, it'll throw an error.

However in plain terms, this just means that the component is missing.

[ratneshnavlakhe]

Getting this
bundle.js:87 Uncaught TypeError: Cannot read property 'createElement' of undefined

Any solutions

[gaearon]

@ratneshnavlakhe Please ask on StackOverflow; this is hard to answer without seeing your complete code.

[ratneshnavlakhe]

@gaearon here is my code ...

import { React, Component } from 'react';
import {render} from 'react-dom';

class App extends Component {
  render () {
    return <p> Hello React this is a webpack!</p>;
  }
}

render(<App/>, document.getElementById('app'));

[gaearon]

import { React, Component } from 'react';

is incorrect, should be

import React, { Component } from 'react';

There is no named export named React. It is confusing because React is a CommonJS module, and since you’re using ES6 imports, Babel tries to map the semantics but they don’t match exactly. { Component } actually grabs Component from React itself so you might just import React from 'react' and use React.Component instead if it’s less confusing.

[ratneshnavlakhe]

Woah, thank you @gaearon for a nice clarification.