Error: Invariant Violation: addComponentAsRefTo when using react-router

Question!

I just started out with React and React-router, and immediately hit a snag. My project is super simple thus far. When I load my "app" in a browser on the / route, I get the following error:

Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.

The components render in the browser though, but then React flips out.

The stack trace isn't helpful, as the last file is my index.js file which contains no React stuff, it only boots a class:

import App from './app/App'

(() => {
  let app = new App()
  app.boot()
})()

App.js contains the following:

import React from 'react'
import Router from 'react-router'
import routes from '../routes'

class App {

  boot() {

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

export default App

And here's my routes:

import React from 'react'
import Router from 'react-router'
let Route = Router.Route
let DefaultRoute = Router.DefaultRoute

import AppView from './ui/AppView.jsx!'
import TaskView from './ui/views/TaskView.jsx!'

let routes =
  <Route handler={AppView} path="/">
    <DefaultRoute handler={TaskView}/>
  </Route>

export default routes

AppView and TaskView are very simple as well:

import React from 'react'
import Router from 'react-router'

let RouteHandler = Router.RouteHandler

class AppView extends React.Component {

  constructor() {
    super()
    this.state = {}
  }

  render() {
    return <div className="app__frame">
      <h1>Planning app</h1>
      <RouteHandler />
    </div>
  }
}

export default AppView

TaskView:

import React from 'react'

class TaskView extends React.Component {

  render() {
    return <section className="task-view">
      <p>test</p>
    </section>
  }
}

export default TaskView

And that's all there is to it. If I set the TaskView route as a normal route, as opposed to DefaultRoute, it errors when I hit the route. That leads me to believe TaskView has a bug, but that's hard to find because it's so simple.

This is probably a stupidly simple thing that I somehow missed. But I can't figure it out, so help is needed. Thanks!

For tooling I use JSPM and Babel.



Answers

As it turned out, I had a buggy version of React-router. I pulled in the master branch with JSPM, et viola, everything works. Version 0.13.3 was the one I had, which threw this weird error.

jspm remove react-router
jspm install react-router=github:rackt/react[email protected]

The magic words.



This video can help you solving your question :)
By: admin