React Error - Uncaught Invariant Violation: Element type is invalid

Question

...expected a string (for built-in components) or a class/function (for composite components) but got: object.

Hi I'm currently trying my hand at React, I'm following a tutorial which is outdated, which is causing some problems. I'm trying to amend the errors myself as I go along, however I have stumbled whilst trying to set up Routes, and receive this error;

Error Message

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

The code the I suspect is causing this is on my app-client.js file which looks like;

app-client.js

var React = require('react'),
Router = require('react-router'),
ReactDOM = require('react-dom'),
Route = Router.Route,
DefaultRoute = Router.DefaultRoute,
App = require('./components/App'),
Audience = require('./components/audience').default,
Speaker = require('./components/speaker'),
Board = require('./components/board'),
routes;

routes = (
    <Route handler = {App}>
        <DefaultRoute handler={Audience} />
        <Route path="speaker" handler={Speaker}></Route>
        <Route path="board" handler={Board}></Route>
    </Route>
);

ReactDOM.render(<Router>{routes}</Router>, document.getElementById('react-container'));

I don't suspect it is coming from my app.js file but for the sake of finding out what is wrong I have included it;

App.js

var React = require('react'),
Router = require('react-router'),
RouteHandler = Router.RouteHandler,
io = require('socket.io-client'),
Header = require('./parts/header.js'),
App;

App = React.createClass({

    getInitialState() {
        return {
            status: 'disconnected',
            title: ''
        }
    },

    componentWillMount() {
        this.socket = io('http://localhost:5432/');
        this.socket.on('connect', this.connect);
        this.socket.on('disconnect', this.disconnect);
        this.socket.on('welcome', this.welcome);
    },

    connect() {
        this.setState({ status: 'connected' });
    },

    disconnect() {
        this.setState({ status: 'disconnect'});
    },

    welcome(serverState) {
        this.setState({ title: serverState.title });
    },

    render() {
        return (
            <div>
                <Header title={this.state.title} status={this.state.status} />
                <RouteHandler />
            </div>
        );
    }
});

module.exports = App;

Can someone point me in the direction of an answer or somewhere that can provide more information about this.

Answer 1

It looks like you're trying to create a <Router/> with the wrong thing (the whole react-router library). Try changing

Router = require('react-router'),

to

Router = require('react-router').Router

so you can use the Router property from React-router, not the whole module itself.

As for the error message: React expects either a string or ReactClass (which is a function/es6 class) passed as the first argument to React.createElement(). JSX is just a way to turn xml-style markup into the proper set of React.createElement()'s for you. So, when you're trying to create <Router/>, React.createElement(Router) is being created and the whole react-router object gets passed in, thus the complaint :)