Browserify transform with reactify

Question

I am trying to build a project using gulp. Unfortunately I am experiencing some trouble with it.

This is what my gulpfile.js looks like:

'use strict';

var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');
var reactify = require('reactify');

// add custom browserify options here
var customOpts = {
  entries: ['./js/app.js'],
  debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts)); 
b.transform(reactify);

// add transformations here
// i.e. b.transform(coffeeify);

gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal

function bundle() {

  return b.bundle()
    // log errors if they happen
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('bundle.js'))
    // optional, remove if you don't need to buffer file contents
    .pipe(buffer())
    // optional, remove if you dont want sourcemaps
    .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
       // Add transformation tasks to the pipeline here.
    .pipe(sourcemaps.write('./')) // writes .map file
    .pipe(gulp.dest('./js/build'));
}

The problem is that gulp is displaying an error indicating that some third party library has somewhere the illegal token '<' the file in question is written in the JSX syntax.

Yet, I don't have the problem when I run the following command:

browserify -g reactify js\app.js > js\build\bundle.js

Please, what is wrong with my gulpfile?

Thanks in advance to anybody seeking to help!

Edit: I suspect that the -g option makes it transform the jsx recursively to plain javascript, I'm trying to find out an equivalent in the watchify.transform function, unsuccessfully.

score 1 · Accepted Answer · answered May 23 '15 at 18:26

As the docs for .transform say:

If opts.global is true, the transform will operate on ALL files, despite whether they exist up a level in a node_modules/ directory

So to replicate -g reactify, you'd do

b.transform(reactify, {global: true});

Keep in mind however that I would consider the fact that you need -g to be a bug in whatever dependency node_module you are referring to. Generally modules should include browserify config params in their own package.json file so that you don't have to configure it globally. As the next part of those docs say:

Use global transforms cautiously and sparingly, since most of the time an ordinary transform will suffice.

Worked perfectly, thanks a lot! Yes, I targeted the module, I will raise the issue to its maintainers. — Mayas, May 23 '15 at 18:37

score 1 · Answer 2 · answered May 24 '15 at 21:31

1

Better to use Babel it supports JSX as well.

https://babeljs.io/docs/usage/jsx/

answered May 24 '15 at 21:31

Code Whisperer

22,959
20
67
85

Never heard about, seems cool but I don't see why is it better to use. Any particular interresting feature? – Mayas May 26 '15 at 08:30
Yes. While it will transpile JSX just like React-Tools, it also transpiles ES6, so you can use arrow functions, classes and more. – Code Whisperer May 27 '15 at 04:17
Browserify also seems to include an ES6 transpiler https://www.npmjs.com/package/browserify-es6-transpiler But thanks for the suggestion ;) – Mayas May 27 '15 at 11:57

Browserify transform with reactify

2 Answers2