CODEWITHSUNDEEP
reactjsbrowserifyreact-router
scripton
scripton

Reputation: 246

'type.toUpperCase is not a function' when classes aren't inline using react

I have some simple routes setup and they work just fine when all the code is inline. However, when I separate a class/component in a different file and reference it using require, the following exception gets thrown in the browser:

type.toUpperCase is not a function

I'm using react, react-router and browserify. The code looks as follows:

app.js

var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Link = Router.Link;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;

var Nav = require('./layout/Nav.js');
var Test = React.createClass({
    contextTypes: {
        router: React.PropTypes.func.isRequired
    },
    render: function render() {
        return (
        <div>
            <h2>Test</h2>
        </div>
        );
    }
});

var routes = (
        <Route name="App" path="/" handler={Nav}>
            <Route name="Test" handler={Test} />
        </Route>
);

Router.run(routes, Router.HashLocation, (Root) => {
    React.render(<Root/>, document.body);
});

Nav.js

var Nav = React.createClass({
    contextTypes: {
        router: React.PropTypes.func.isRequired
    },
    render: function render() {
        return (
            <div>
                <nav>
                    <ul>
                       <li><Link to="Home">Home</Link></li>
                    </ul>
                </nav>
                <RouteHandler/>
            </div>
        );
    }
});

This code above works fine when its all inline in a single file. Why does this fail when loaded from a separate file and how can it be fixed?

Upvotes: 0

Views: 567

Answers (1)

lukewestby
lukewestby

Reputation: 1207

At first glance it looks like you need to export Nav.

var Nav = React.createClass({
  // ...
});

module.exports = Nav;

Upvotes: 1

Related Questions