Rails, Browserify and React with coffeescript

Question

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 (init.js.coffee)

React = require('react')

ReactDOM = require('react-dom')

PhotoRoot = require('photo_root')

and a component (photo_root.js.coffee)

module.exports = React.createClass

  getInitialState: ->

    null

  getDefaultProps: ->

    null



  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=".js.coffee" --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" -`:



events.js:154

      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!!

Appreciated!!

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

ok that was simple:

PhotoRoot = require('photo_root')

should be

PhotoRoot = require('./photo_root')

Rails, Browserify and React with coffeescript

Sign up