RouteHandler fails with empty context?

[nkrumm]

Hi all. I am hoping this will ring a bell with someone. I have a pretty basic react-router/Reflux combo, which I am trying to upgrade to react 0.12/react-router 0.11.6.

For reference, I have:

var DatasetRoutes = [
    <Route name="datasets" path="/" handler={DatasetCardView} >
        <Route name="dataset"  path=":uuid"          handler={DatasetView} />
        <Route name="metadata" path=":uuid/metadata" handler={DatasetMetadataView} />
        <Route name="delete"   path=":uuid/delete"   handler={DeleteView} />
        <Route name="error"    path=":uuid/error"    handler={ErrorView} />
    </Route>
];

Router.run(DatasetRoutes, function (Handler) {
  React.render(Handler(), document.getElementById('DatasetsView'));
});

And my DatasetCardView (shortened here):

var RouteHandler = Router.RouteHandler;
var DatasetCardView = React.createClass({
    render: function() {
        return (<div><SomeOtherComponents /> <RouteHandler /></div>)
    }
 });

Everything works just fine when I omit <RouteHandler />; but when I include it, I get the following:

Warning: Required context `getRouteAtDepth` was not specified in `RouteHandler`.
Warning: Required context `getRouteComponents` was not specified in `RouteHandler`.
Warning: Required context `routeHandlers` was not specified in `RouteHandler`.
 Uncaught TypeError: Cannot read property 'concat' of undefined

The piece of code that fails is from RouteHandler.js (https://github.com/rackt/react-router/blob/81c7a5785272970f246fefcec1642b9ca372155e/mixins/RouteHandler.js#L16)

  getChildContext: function () {
    return {
      routeHandlers: this.context.routeHandlers.concat([ this ])
    };
  },

When I trace the code path and execution, this is actually the second time that getChildContext is evaluated; the first time it works just fine, the second time it fails.

Any ideas? Apologies for posting a help request in ostensibly a more development-focused environment; I really do appreciate any ideas folks might have.

[gaearon]

Any other places in source code where you use RouteHandler?

Evidently context gets lost for some reason—I want to be sure we're talking about DatasetCardView's route handler context.

Can you try temporarily changing DatasetCardView to return just RouteHandler and nothing more? Does the issue stay in this case?

[nkrumm]

Thanks @gaearon for checking in. This was probably something else, actually. I've been using browserify to bundle up the JS code and I think it was the Reflux library that was somehow bundling a second copy of React (I could tell it was loaded twice because the console showed that 'React DevTools' message twice). In any case, I think it was this as well as browserify's cache (?)-- I basically went through every require() statement, commented it out, rebuilt the bundle, and then uncommented it. And voila... it works now.

Bottom line: don't load React twice, and make sure you know what browserify is doing.

(For reference, I have React 0.12.2, ReactRouter 0.11.6, and Reflux 0.2.3. I'm loading the React and Router libs via CDN and attaching them to the window globals with browserify).

Thanks for a great library!

[gaearon]

Bottom line: don't load React twice, and make sure you know what browserify is doing.

HOURS_SPENT_HERE++

facebook/react#2402

[andr83]

+1 Thanks for solution.

[maximvl]

Hi, I'm getting similar errors with new react and router, but I can't find how react could be loaded twice, cause everything is hand-written, nothing is generated or bundled or whatever. Here is a full code and a browser log https://gist.github.com/maximvl/b146473ef2b49034812a, any advice is appreciated!