CODEWITHSUNDEEP
gruntjsreactjsbrowserify
James Lin
James Lin

Reputation: 26528

Grunt browserify transform ReactJS then bundle

In my project I am using Grunt to build the javascript files, I have ReactJS components which makes Grunt complain about Error: Parsing file in one of my javascript file, caused by the JSX syntax:

"use strict";

var $ = require('jquery');
var React = require('react');
require('app/comments/comment_box_react.js');

$.fn.comment_box = function(options){
    var opts = $.extend({}, $.fn.comment_box.defaults, options);
    var me = this;

    React.render(<CommentBox url="comments.json" />, this);
    return me;
}

$.fn.comment_box.defaults = {}

My browerify config in Grunt looks like this:

browserify: {
    main: {
        files: {
            '<%= paths.js_built %>/bundle.js': ['<%=paths.js %>/project.js'],
        }
    },
    transform: ['reactify'],
},

How do I perform transform first before the bundle?

Upvotes: 0

Views: 536

Answers (2)

James Lin
James Lin

Reputation: 26528

I ended up using gulp and transform globally before bundle:

https://github.com/andreypopp/reactify/issues/66

gulp.task('activitiesjs', function() {
    browserify({
        entries: [
            paths.js+'/lib/activities/activities.js',
        ]
    }).transform(reactify, {global:true}).bundle().pipe(source('bundle.js')).pipe(gulp.dest(paths.js_built+'/activities'));
});

Upvotes: 0

Crob
Crob

Reputation: 15175

The transform example in their docs has the transform array in an options object. 

browserify: {
  dist: {
    files: {
      'build/module.js': ['client/scripts/**/*.js', 'client/scripts/**/*.coffee'],
    },
    options: {
      transform: ['coffeeify']
    }
  }
}

Also, looks like your transform definition is outside of your main definition. Not sure if that would be global or not, so you might have to move it inside of main. Something like this

browserify: {
    main: {
        files: {
            '<%= paths.js_built %>/bundle.js': ['<%=paths.js %>/project.js'],
        },
        options: {
            transform: ['reactify']
        }
    }
}

Upvotes: 1

Related Questions