Chris B. Chris B. - 3 months ago 15
React JSX Question

Getting error following React tutorial

I'm trying to follow a React.js and React-Router tutorial (from here), but the example code doesn't work. I have no idea what I'm doing wrong.

This is my code. I get a

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).
warning, then an
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
error.

What's going wrong?

import React from 'react';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import { DefaultRoute, Link, Route, IndexRoute, RouteHandler } from 'react-router';
import 'whatwg-fetch';

var MainLayout = React.createClass({
render: function() {
// Note the `className` rather than `class`
// `class` is a reserved word in JavaScript, so JSX uses `className`
// Ultimately, it will render with a `class` in the DOM
return (
<div className="app">
<header className="primary-header"></header>
<aside className="primary-aside"></aside>
<main>
{this.props.children}
</main>
</div>
);
}
});

var SearchLayout = React.createClass({
render: function() {
return (
<div className="search">
<header className="search-header"></header>
<div className="results">
{this.props.children}
</div>
<div className="search-footer pagination"></div>
</div>
);
}
});

var UserList = React.createClass({
render: function() {
return (
<ul className="user-list">
<li>Dan</li>
<li>Ryan</li>
<li>Michael</li>
</ul>
);
}
});

var Home = React.createClass({
render: function() {
return (
<p>Welcome to the site</p>
);
}
});

ReactDOM.render((
<Router>
<Route component={MainLayout}>
<Route path="/" component={Home} />
<Route component={SearchLayout}>
<Route path="users" component={UserList} />
<Route path="search" component={SearchLayout} />
</Route>
</Route>
</Router>
), document.getElementById('root'));

Answer

As far as I see, react-router API was changed from the date of tutorial publishing and now you have to use

import { Router } from 'react-router'

instead of

import Router from 'react-router'

or just append Router to your line with other imports from 'react-router'

import { Router, DefaultRoute, Link, Route, IndexRoute, RouteHandler } from 'react-router'