Refreshing Page that Renders React Component with ES6 Constructor Breaks App

Question

I am building a React web app in ES6 using React-Router and Alt, following this tutorial . All my components render correctly, but those that have a constructor break when the browser page is refreshed. Here is the error.

TypeError: undefined is not a function
   at new Track (/Users/juancarlosfarah/Git/maestro/src/components/Track.js:14:17)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:135:16)
   at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)
   at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:247:34)
   at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)
   at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:247:34)
   at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)
   at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
   at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactMultiChild.js:192:44)
   at ReactDOMComponent.Mixin._createContentMarkup (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactDOMComponent.js:289:32)
   at ReactDOMComponent.Mixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactDOMComponent.js:199:12)
   at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:247:34)
   at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)

On Track.js, line 14 the constructor is defined:

class Track extends React.Component {

    constructor(props) {
        super(props);
        console.debug("Constructing Track...");
        this.state = TrackStore.getState();
        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleSaveClick = this.handleSaveClick.bind(this);
        this.handleUndoClick = this.handleUndoClick.bind(this);
        this.renderButtons = this.renderButtons.bind(this);
        this.onChange = this.onChange.bind(this);
    }
    ...
}

In app.js, I render the routes as follows:

Router.run(routes, Router.HistoryLocation, function(Handler) {
    React.render(<Handler />, document.getElementById('app'));
});

And they are defined in routes.js:

export default (
    <Route handler={App}>
        <Route path='/' handler={Home} />
        <Route path="/tracks/" handler={Tracks} />
        <Route path="/track/:id" handler={Track} />
    </Route>
);

In server.js, the pages are rendered using Swig.

app.use(function(req, res) {
    Router.run(routes, req.path, function(Handler) {
        let html = React.renderToString(React.createElement(Handler));
        let page = swig.renderFile('views/index.html', { html: html });
        res.send(page);
    });
});

Even if I remove all the code inside constructor and leave only a console.log statement, I get the error when I refresh the browser. If there is no constructor, then the page renders fine on refresh.

Answer 1

After a long time, I figured out the issue I was experiencing. In Track.js I included a line to help me debug errors and it called console.debug() (I have now added it explicitly to the code in the question, but I did not show it originally). When Track.js was rendered by the client, this wasn't a problem, as the console in Chrome would be able to run console.debug() . However, when accessing the URL directly, the page would be rendered by the server, which does not support console.debug() . Hence the application would break and the cryptic error was shown. Removing that line or changing it to console.log() fixed the issue.