martin martin - 4 years ago 212
CoffeeScript Question

Rails, Browserify and React with coffeescript

I am trying to setup React with npm, and thus use it without the rails-react gem.
I have installed Browserify and react and react-dom. It seems to work, I was able to run a simple 'hello world' example.'

Now to some on the more complex stuff. I already have a lot of components that I have loaded with rails-react and I need to convert these.

I have created and init script (

React = require('react')
ReactDOM = require('react-dom')
PhotoRoot = require('photo_root')

and a component (

module.exports = React.createClass
getInitialState: ->
getDefaultProps: ->

showCard: (photoId) ->
this.refs.card.setPhotoId photoId

render: ->
React.DOM.div {className: 'photo-root'},
React.createElement PhotoGrid, showCard: @showCard
React.createElement PhotoActionCard, photoId: 615, ref: "card"

These two files are in the same folder.

When I run this I get an error from BrowserifyRails::BrowserifyError:

Error while running `/Users/mh/rails_projects/phototank/node_modules/.bin/browserifyinc -t coffeeify --extension="" --list --cachefile=/Users/mh/rails_projects/phototank/tmp/cache/browserify-rails/browserifyinc-cache.json -o "/Users/mh/rails_projects/phototank/tmp/cache/browserify-rails/output20170205-9947-edkf1y" -`:

throw er; // Unhandled 'error' event

Error: Cannot find module 'photo_root' from '/Users/mh/rails_projects/phototank/app/assets/javascripts/components'
at /Users/mh/rails_projects/phototank/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17

It is looking for 'photo_root' in the right location, but is not finding it. Does it have something to do with the extensions. I am using coffeescript!!


Answer Source

ok that was simple:

PhotoRoot = require('photo_root')

should be

PhotoRoot = require('./photo_root')
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download