Uncaught Error: Invariant Violation: Element type is invalid: Object

Question

I'm tinkering with react-router, tying to implement simple routing. I type my code as written in their example (but without imports) https://github.com/rackt/react-router#whats-it-look-like.

And I get this error in a browser:

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

Here is what I do.

I attach scripts on the page, ReactRouter.min.js and my code in react-routes.js. And also react and react-dom and jquery (all three in app.js):

<script src="/js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
<script src="/js/react-routes.js" type="text/javascript" charset="utf-8"></script>

Here is my react-router.js, not compiled yet:

'use strict';
window.Router = window.ReactRouter;
window.Link = window.ReactRouter.Link;
window.Route = window.ReactRouter.Route;

const Foo = React.createClass({
    render() {
        return (
            <div>
                <h1>HELLO, me FOO</h1>
            </div>
        )
    }
});

ReactDOM.render((
    <Router>
        <Route path="/" >
            <Route path="/page/one" component={Foo}/>
        </Route>
    </Router>
), document.getElementById('content-section'))

This is my react-router.js after compilation with Babel. I attach exactly this on the page:

babel --presets react -o public/js/react-routes.js assets/js/react-routes.js:

'use strict';

window.Router = window.ReactRouter;
window.Link = window.ReactRouter.Link;
window.Route = window.ReactRouter.Route;

const Foo = React.createClass({
    displayName: "Foo",

    render() {
        return React.createElement(
            "div",
            null,
            React.createElement(
                "h1",
                null,
                "HELLO, me FOO"
            )
        );
    }
});

// Error is thrown here, in this line
ReactDOM.render(React.createElement(
    Router,
    null,
    React.createElement(
        Route,
        { path: "/" },
        React.createElement(Route, { path: "/page/one", component: Foo })
    )
), document.getElementById('content-section'));

What do I do wrong? Why the error is thrown? Router is an object, not a React Component. Why? I look at this example and type my code the same way https://github.com/rackt/react-router#whats-it-look-like

Answer 1

Your

window.Router = window.ReactRouter;

should be

window.Router = window.ReactRouter.Router;

You're getting the error because you're trying to use <Router />, but Router is a reference to the React Router library (and not the Router component).