Unable to read property "__reactAutoBindPairs" undefined - React.js

Question

I am trying to create a simple component in React with Coffeescript and Node. However, he continues to throw this error:

Cannot read property '__reactAutoBindPairs' of undefined

Here is my code:

index.coffee:

express = require('express')
JSX     = require('node-jsx').install()
React   = require('react')
TestApp = require('../components/Test.react')
router  = express.Router()

# home page
router.get '/', (req, res, next) ->
  React.renderComponent (TestApp {}), document.getElementById('test')
  res.render 'index', title: 'Example'

module.exports = router

Test.react.coffee:

React = require('react')

TestApp = React.createClass
    render: ->
      p "Hello!"

module.exports = TestApp

index.jade

extends layout

block content
  h1= title
  #test 
  p Welcome to #{title}

Any help would be greatly appreciated. Thank!

Answer 1

I think you need to do a few things:

• Install the ReactDOM package ( npm install react-dom).
• Require ReactDOM.
• Wrap the statement require()for your component in React.createFactory().
• Mark the component ReactDOM.render()instead React.renderComponent().

Note:

express  = require('express')
JSX      = require('node-jsx').install()
React    = require('react')
ReactDOM = require('react-dom')
TestApp  = React.createFactory(require('../components/Test.react'))
router   = express.Router()

# home page
router.get '/', (req, res, next) ->
  ReactDOM.render (TestApp {}), document.getElementById('test')
  res.render 'index', title: 'Example'

module.exports = router

See the React blog for clarification .