CODEWITHSUNDEEP
reactjsbrowserify
Kurt Mueller
Kurt Mueller

Reputation: 3224

Browserify: Can't seem to get reactify to work with coffeeify

I can't seem to get reactify to work with coffeeify. I followed the Reactify's readme to no avail.

app.coffee

### @jsx React.DOM ###

console.log 'hi'

browser command:

browserify -t coffeeify -t [ reactify -x coffee] ./src/coffeescripts/app.coffee                                               
/Users/mueller.128/repos/klc/react_colorpicker/src/coffeescripts/app.coffee:1
/** @jsx React.DOM */
^
ParseError: regular expressions cannot begin with `*`

my attempt at using the browserify api in a gulp task

var browserify = require('browserify');
var source     = require('vinyl-source-stream');
var watchify   = require('watchify');
var coffeeify  = require('coffeeify');
var reactify   = require('reactify');


gulp.task('browserify', function() {
  return browserify('./src/coffeescripts/app.coffee')
    .transform({ }, coffeeify)
    .transform({ extension: "coffee" }, reactify)
    .bundle({debug: true})
    .pipe(source('./src/bundle.js'))
    .pipe(gulp.dest('./build/javascripts/'));
});

Thanks for any help.

Upvotes: 1

Views: 2088

Answers (3)

skelley
skelley

Reputation: 507

I ran into this same issue -- ParseError: regular expressions cannot begin with `*` -- when using coffee-reactify as duereg suggests. Following the recipe from the gulp recipe led me to this:

bundler = browserify 'test.cjsx', {
  transform : [ require 'coffee-reactify' ]
}

...which exhibited the issue. Some ad-hoc logging in browserify revealed it's some kind of subtle bug where the transforms get added twice when specified in this way, confirming Ben's suspicion that the compiler was running twice. Changing it to the following:

bundler = browserify 'test.cjsx'
bundler.transform require 'coffee-reactify'

...fixed the issue entirely.

A functioning example:

gulp       = require 'gulp'
gutil      = require 'gulp-util'
browserify = require 'browserify'
source     = require 'vinyl-source-stream'

bundler = browserify './test.cjsx'
bundler.transform require 'coffee-reactify'

bundle = ->
  return bundler.bundle()
    .on 'error', gutil.log.bind(gutil, 'Browserify Error')
    .pipe source 'all-scripts.js'
    .pipe gulp.dest './.dist'

gulp.task 'default', ->
  bundle()

Where test.cjsx is just:

# @cjsx React.DOM

Someone recently opened a ticket on browserify's github.

Upvotes: 1

duereg
duereg

Reputation: 146

I've had luck with the following gulp task. Note that you'll have to install the coffee-reactify plugin for this to work.

var gulp = require('gulp');
var browserify = require('gulp-browserify');
var rename = require('gulp-rename');

gulp.task('browserify', function() {
  gulp.src('./src/coffeescripts/app.coffee', { read: false })
    .pipe(browserify({
      debug: true
      transform: ['coffee-reactify'],
      extensions: ['.coffee']
    }))
    .pipe(rename('./src/bundle.js'))
    .pipe(gulp.dest('./build/javascripts/'))
});

Upvotes: 0

Kyle Decot
Kyle Decot

Reputation: 20815

browserify -t coffeeify -t [ reactify -x] ./app.coffee

Upvotes: 0

Related Questions