React-router: React.createElement: type should not be null, undefined, boolean, or number.

[arianitu]

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]

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

[killfish]

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

[taion]

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

[killfish]

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]

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

[killfish]

Ahhh, I see. Thanks.

[chrisranderson]

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]

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]

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]

This solved my issue: https://github.com/rackt/react-router/issues/1799

[shauryadhadwal]

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

Check this out.

[cablegunmaster]

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