Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:

I'm working with React and Browserify and trying to require some components, but i get the error:

Error: Cannot find module './components/pages/Home' from '/.../.../reactCoffee/app/scripts'

File in question is index.cjsx (using coffeescript):

React = require 'react'
Router = require 'react-router'
Routes = Router.Routes
Route = Router.Route
DefaultRoute = Router.DefaultRoute

Home = require './components/pages/Home'
About = require './components/pages/About'

React.render((
  <Router>
    <Route name='home' path='/' handler={Home}>
      <Route name='about' path='about' handler={About} />
    </Route>
  </Router>
), document.querySelector '#spa')

and the file I'm trying to require is:

React = require 'react'
Header = require 'components/Header'
Footer = require 'components/Footer'
Store = require 'Store'
Actions = require 'Actions'

Home = React.createClass

  ...

  render: ->
    return
      <div>
        <Header />
          <h1> HI from React and CJSX </h1>
        <Footer />
      </div>

module.exports = Home

File Structure:

.
├── gulpfile.js
├── package.json
└── app
    ├── styles
    ├── index.html
    └── scripts
        └── index.cjsx
        └── components
            └── Header.cjsx
            └── Footer.cjsx
            └── pages
                └── Home.cjsx
                └── About.cjsx
share|improve this question
    
Somewhere you are trying to require './components/pages/Home' but the path is incorrect considering the file you are requiring from. – gor181 Jul 23 at 6:46

1 Answer 1

up vote 1 down vote accepted

specify the file's extension since it is not one that Browserify knows

Home = require './components/pages/Home.cjsx'

Or you can add something like this in your package.json to inform Browserify of the additional file extension.

"browserify": {
    "extension": [ "cjsx" ]
}
share|improve this answer
    
This worked, thanks! Now I got past that error but I keep getting 'unexpected indentation' when it parses my .cjsx files. I think it has something to do with me using coffeescript with react – GoldenBeet Jul 23 at 16:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.