React-router: Invariant Violation from the depths of transition.

[flq]

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): 
Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). 
Try rendering this component inside of a new top-level component which will hold the ref.

Here`s the stack trace:

I have been following the animation example with the difference that I have a single route inside the root route (!) defined as DefaultRoute.

var routes = (
  <Route path="/" handler={App}>
    <DefaultRoute handler={Areas} />
  </Route>
);

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

However, things seem to be working normally. Is this kind of invariant violation to be expected, or can it be rectified somehow?

[ryanflorence]

which version of the router are you on?

[flq]

It is 0.13.2
As addiional info I can say that transitioning to a new handler also raises this exception.
The page then stays on the currently shown route.

[ryanflorence]

how are you transitioning at all to anywhere? you only have one path to visit. When do you get this error?

[flq]

Yup, sorry - I expanded the example...

var routes = (
  <Route path="/" handler={App}>
    <DefaultRoute handler={Areas} />
    <Route name="demands" path="demands/:areaId" handler={Demands} />
  </Route>
);

The first time the exception comes it happens with only the default route present. Once I expanded the app and added a transition (done with router.transitionTo("demands", { areaId: item.Id })), the exception also happens in the transitionTo, and the default route stays visible.

[ryanflorence]

I just opened up the animation example and added a default route, works fine:

var Default = React.createClass({
  render: function () {
    return (
      <div className="Image">
        <h1>Default</h1>
        <p>Do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    );
  }
});

var routes = (
  <Route handler={App}>
    {/* added this */}
    <DefaultRoute handler={Default}/>
    <Route name="page1" handler={Page1} />
    <Route name="page2" handler={Page2} />
  </Route>
);

What is Hub?

[ryanflorence]

Also, you'll need a key on <RouteHandler/> for the route <Route name="demands" path="demands/:areaId" handler={Demands} /> or else it won't be able to animate.

[flq]

Okay, after much trial and error I figured out that the problem is related to bundling.

I bundle big items into a common.js and specific bundled js then reference those things exposed by the common.js.

So react and react-router ended up in common, but not the react/lib/ReactCSSTransitionGroup which seemed to spawn a second react, um, instance. And that wreaked all kinds of havoc.

There is a repro over here : https://github.com/flq/javascript_issues/tree/router_exception

Removing the TransitionGroup fixes the issue.

Sorry for bothering you, but maybe this account will save some other poor soul some time.

[lexdon]

Encountered this very same issue using browserify. Explicitly bundling react/lib/ReactCSSTransitionGroup solved it.

@flq +1 for posting your solution, it was very helpful.

[grabbou]

Thanks! Same thing here

[mikedfunk]

Not sure how to solve this with jspm

[danieldunderfelt]

I know how to solve it with JSPM:

jspm remove react-router
jspm install react-router=github:rackt/react-router@master

I had the same error, and pulling in the master branch fixed it.

[jxm262]

@lexdon would you be able to post an example of what you did to solve this? I'm getting something similar using the Mochify project which wraps all my unit tests in Browserify. Kind of stuck and not sure how to get around this error

[ryanflorence]

we do transition a lot differently in 1.0, so this doesn't apply anymore, thanks :)

[KeKs0r]

@lexdon @flq : I am encountering the same issue and don't fully get the solution yet.
Although I have to admin, I have copied the ReactCSSTransitionGroup into my own project and modified it slightly. This is probably the reason why I am facing this issue. But I still don't know how to solve it.