CODEWITHSUNDEEP
coffeescriptreactjsrequirebrowserify
MikaelC
MikaelC

Reputation: 408

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

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

Upvotes: 2

Views: 766

Answers (1)

Ed Ballot
Ed Ballot

Reputation: 3485

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

Upvotes: 1

Related Questions