Coffee-Reactify Compilation Issue - coffeescript

Question

I'm really hoping someone can help me with this issue because I've searched high and low to no avail and tried everything I can think of. I'm new to ReactJS and Browserify (though I don't think this has anything to do with Browserify) and can't seem to get this code working. I've been following along with the video series "Getting Started With React.js," and section 5.2 introduces Browserify and setting it up properly to work with React. Using plain old JavaScript, I'm able to get it working no problem, but when I try to use Coffee-Reactify and CoffeeScript, everything compiles fine, but when I load the page, I get this error:
"Uncaught TypeError: Cannot read property 'firstChild' of undefined"
When I follow the stack trace, it seems to error out in the findComponentRoot method of React, which I haven't touched. This leads me to believe there's something wrong with my CoffeeScript, but I've compared it line for line with the JavaScript, and aside from the additional "return" statements the CoffeeScript compiler adds, nothing seems too different. If anyone out there can replicate or identify my issue, I'd greatly appreciate it! Here is the code for all of my files, and thank you all very much in advance!
index.jade
doctype html
html
head
meta(charset='utf-8')
title React Tools
link(rel='stylesheet', href='bower_components/bootstrap/dist/css/bootstrap.css')
body
#app
script(src='bower_components/lodash/dist/lodash.js')
script(src='bower_components/react/react.js')
script(src='build/app.js')
app.coffee
MessageBox = require('./MessageBox.cjsx')
reactComponent = React.render(
<MessageBox />,
document.getElementById('app')
)
SubMessage.cjsx
SubMessage = React.createClass
handleDelete: (e) ->
#props.onDelete(#props.message)
propTypes:
message: React.PropTypes.string.isRequired
getDefaultProps: ->
message: "It's good to see you"
render: ->
<div>
{#props.message}
<button onClick={#handleDelete} className='btn btn-danger'>x</button>
</div>
module.exports = SubMessage
MessageBox.cjsx
React = require 'react'
SubMessage = require './SubMessage.cjsx'
MessageBox = React.createClass
deleteMessage: (message) ->
newMessages = _.without(#state.messages, message)
#setState
messages: newMessages
handleAdd: (e) ->
newMessage = #refs.newMessage.getDOMNode().value
newMessages = #state.messages.concat [newMessage]
#setState
messages: newMessages
getInitialState: ->
isVisible: true,
messages: [
'I like the world',
'Coffee flavored ice cream is underrated',
'My spoon is too big',
'Tuesday is coming.',
'I am a banana'
]
render: ->
inlineStyles =
display: if #state.isVisible then 'block' else 'none'
messages = #state.messages.map ((message) ->
<SubMessage message={message} onDelete={#deleteMessage} />
).bind(#)
return (
<div className='container jumbotron' style={inlineStyles}>
<h2>Hello, World</h2>
<input ref='newMessage' type='text' />
<button className='btn btn-primary' onClick={#handleAdd}>Add</button>
{ messages }
</div>
)
module.exports = MessageBox
As a side note, React is partially "working" because the messages array gets mapped to a SubMessage array and displays properly with the delete buttons. So the error seems to be happening at a later point in the cycle. Thanks again!

Answer 1

Wow, what an oversight on my part. It turns out I was loading React from two different places, once as a node module in my coffee/cjsx files and again in my HTML, but from a bower-installed version of React. I can't believe I spent so much time on this, but hopefully my struggle helps somebody else!