Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React.createElement: type should not be null, undefined, boolean, or number. #2220

Closed
arianitu opened this issue Oct 9, 2015 · 12 comments
Closed

Comments

@arianitu
Copy link

arianitu commented Oct 9, 2015

I'm trying to upgrade to v1.0.0 and I'm running into some really basic issues

    var MissingPage = React.createClass({
        render: function render() {
            return (
                <div>
                    <h1>Missing Page!</h1>
                    <p>Check your routing</p>
                </div>
            );
        }
    });

    var App = React.createClass({
        render: function render() {
            return (
                <div className="wrapper">
                    <div className="body">
                    {this.props.children}
                    </div>
                </div>
            );          
        }
    });

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

    let history = createBrowserHistory();
    var router = (<Router history={history}>
                    <Route path="/" component={App}>
                      <IndexRoute component={Index} />
                      <Route path="*" component={MissingPage}/>
                    </Route>
                  </Router>);

This generates React.createElement: type should not be null, undefined, boolean, or number. This is using react-router 1.0.0-rc3, react 0.14 and webpack. It appears Router is returning an Object instead of a Function?

@taion
Copy link
Contributor

taion commented Oct 9, 2015

You're importing something incorrectly, most likely Router. Most likely issue is that e.g. var Router = require('react-router'); won't work any more (though import Router from 'react-router' will).

@taion taion closed this as completed Oct 9, 2015
@killfish
Copy link

Does this mean we need to use an es6 compiler to use react router now?

@taion
Copy link
Contributor

taion commented Oct 19, 2015

No, you can use the standard require with CJS modules, along with React.createClass.

@killfish
Copy link

I would still need to use something like babel though...
Otherwise I get this error: Module build failed: Error: Parse Error: Line 4: Illegal import declaration

@taion
Copy link
Contributor

taion commented Oct 19, 2015

Use e.g. var Route = require('react-router').Route.

@killfish
Copy link

Ahhh, I see. Thanks.

@chrisranderson
Copy link

Getting this same problem, but in the browser. Using:

var Router = ReactRouter
var Route = Router.Route

This is actually for a class :) I wouldn't use the in-browser transform in a real app.

@MatthewHerbst
Copy link

I'm running into this same error, upgrading from v.0.13.3 to v1.0.0-rc4:

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

My main code:

import React from 'react';
import ReactDOM from 'react-dom';
import {DefaultRoute, Route, Router} from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import {About, LeaderboardPage, Profile, TopNav, Validate} from '../components';

var App = React.createClass({
  render: function () {
    return (
      <div className="dvt">
        <div className="dvt-nav-top">
          <TopNav />
        </div>
        <div className="dvt-content">
          {this.props.children}
        </div>
      </div>
    );
  }
});

let browserHistory = createBrowserHistory();
ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <DefaultRoute component={About} />

      <Route path="about" component={About} />
      <Route path="leaderboards" component={LeaderboardPage} />
      <Route path="profile" component={Profile} />
      <Route path="validate/:projectId" component={Validate} />
    </Route>
  </Router>
), document.getElementById('app'));

@taion
Copy link
Contributor

taion commented Nov 11, 2015

Thanks for your question!

We want to make sure that the GitHub issue tracker remains the best place to track bug reports and feature requests that affect the development of React Router.

Questions like yours deserve a purpose-built Q&A forum. Would you like to post this question to Stack Overflow with the tag #react-router? https://stackoverflow.com/questions/ask?tags=react-router.

We also have an active and helpful React Router community on Reactiflux, which is a great place to get fast help with React Router and with the rest of the React ecosystem. You can join at https://discord.gg/0ZcbPKXt5bYaNQ46.

@MatthewHerbst
Copy link

This solved my issue: #1799

@shauryadhadwal
Copy link

https://codereviewvideos.com/blog/warning-react-createelement/

Check this out.

@cablegunmaster
Copy link

cablegunmaster commented May 20, 2016

For future googlers who come across this error, by upgrading from 0.24 -> 0.26 react-native

Check if:
export default class
is changed to:
export class

And a name has been defined in the class.
Also I refer to the release: https://github.com/facebook/react-native/releases

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants