Browserify: Cannot find module '...' from '...' (Coffeescript + React)

Question

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

Somewhere you are trying to require './components/pages/Home' but the path is incorrect considering the file you are requiring from. — gor181
– gor181, Commented Jul 23, 2015 at 6:46

Ed Ballot · Accepted Answer · 2015-07-23 14:40:16Z

1

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" ]
}

edited Jul 23, 2015 at 14:40

answered Jul 23, 2015 at 14:35

Ed Ballot

3,5051 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MikaelC Over a year ago

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

Collectives™ on Stack Overflow

Browserify: Cannot find module '...' from '...' (Coffeescript + React)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related