Using browserify with BroccoliJS

Question

I'm trying to get started using BroccoliJS to build apps using the React framework. I'm trying to use browserify to combine the javascript files I'm using but it keeps returning errors when I try to run the build on a barebones application. I have a directory structure something like

|--app
   |--index.js
   |--index.html
|--node_modules
   |--react
|--public
|--styles
   |--app.scss
|--Brocfile.js
|--package.json

My brocfile is something like

/* Brocfile.js */

var compileSass = require('broccoli-sass');
var funnel = require('broccoli-funnel');
var mergeTrees = require('broccoli-merge-trees');
var browserify = require('broccoli-browserify');

var javascript = funnel('app', {
  srcDir: '/'
});

var styles = funnel('styles', {
  srcDir: '/'
});

var appJs = browserify(javascript, {
  entries: ['index.js'],
  outputFile: 'app.js',
  transform: ['reactify']
});

var appCss = compileSass([styles], 'app.scss', 'application.css');

module.exports = mergeTrees([appJs, appCss]);

The problem is I keep getting errors to the effect of Cannot find module 'app.js'.

I'm not overly picky about how I end up compiling the project since I don't know much about any of the tools I'm using yet, but I would like to use Broccoli if possible. Would anyone have a moment to point me in the right direction to get this working? Thank you.

EDIT:

If it helps, this is what app.js looks like.

var React = require('react');

var App = React.createClass({
  render: function() {
    return (
      <div>
        <h1>TEST</h1>
      </div>
      );
  }
});

React.render(<App />, document.getElementById('app'));

score 1 · Accepted Answer · answered Sep 01 '15 at 02:16

I finally got this working. If anyone else is having trouble with this, switching to Babelify (in place of reactify) seemed to be the easiest solution I could find. I also decided to use fast-browserify since it supports caching. Here's the brocfile that worked for me.

var mergeTrees = require('broccoli-merge-trees');
var compileSass = require('broccoli-sass');
var fastBrowserify = require('broccoli-fast-browserify');
var babelify = require('babelify');

var appJs = fastBrowserify('app', {
  browserify: {
    extensions: ['.js']
  },
  bundles: {
    'assets/app.js': {
      entryPoints: ['index.js'],
      transform: {
        tr: babelify
      }
    }
  }
});

var appCss = compileSass(['styles'], 'app.scss', '/assets/app.css');

module.exports = mergeTrees([appJs, appCss, 'public']);

sqram · Answer 2 · 2015-10-18T03:07:51.647

I could not get this to work. I did this instead

Brocfile.js:

var mergeTrees = require('broccoli-merge-trees')
var funnel = require('broccoli-funnel')
var babel = require("broccoli-babel-transpiler")
var browserify = require('broccoli-browserify')
var react = require('broccoli-react')

var js = funnel('src/js', {
  srcDir: '/',
  destDir: 'js'
})

js = babel(js)

js = browserify(js, {
  entries: ['./js/main.js'],
  outputFile: 'js/build.js'
})

js = react(js, {extensions: ['js']})

module.exports = mergeTrees([js])

Then, in main.js i can do

import TopNav from './components/top-nav'
ReactDOM.render(<TopNav />, document.getElementById('top-nav-wrap'))

top-nav.js:

var TopNav = React.createClass({

  render: function() {
    return (
      <div className='top-nav'>
        <a href='#'>one</a>
        <a href='#'>one</a>
        <a href='#'>one</a>
        <a href='#'>one</a>
      </div>
    );
  }
})

export default TopNav

Project tree

app/
  └── Brocfile.js
  └── src/
      └── index.html
  └── js/
      ├── mnain.js
      ├── components/
          └── top-nav.js

Using browserify with BroccoliJS

2 Answers2