"Unexpected token" error when running Reactify

[danawoodman]

Hi, I've done my best to work around this issue but cannot find the error in my approach.

I'm trying to setup Reactify using various iterations of the following code (in my gulpfile.js):

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

function scripts(watch) {
  var bundler, rebundle;

  bundler = browserify(config.paths.main, {
    basedir: __dirname,
    //debug: !config.production,
    debug: false,
    cache: {}, // required for watchify
    packageCache: {}, // required for watchify
    fullPaths: watch // required to be true only for watchify
  });

  if (watch) {
    bundler = watchify(bundler);
  }

  rebundle = function () {
    return bundler
      .transform(reactify)
      .bundle()
      .pipe(source('index.js'))
      .pipe(gulp.dest('./dist'));
  };

  bundler
    .on('update', rebundle)
    .on('error', function (e) {
      gutil.log('Browserify error', e);
      this.emit('end');
    });

  return rebundle();
}

gulp.task('scripts', ['clean-js'], function () {
  return scripts(false);
});

gulp.task('watch-scripts', ['clean-js'], function () {
  return scripts(true);
});

Running gulp scripts produces the error Unexpected token pointing to the beggining of a JSX in this file:

/** @jsx React.DOM */
var React = require('react');

module.exports = React.createClass({
  render: function () {
    return (
      <h1>Test</h1>
    );
  }
});

Versions:

└── reactify@0.17.1
├── browserify@7.0.0
└─┬ watchify@0.10.2
  └── browserify@4.2.3

Is there something obvious I'm missing? Would love any help, thanks!

[andreypopp]

Try to move .transform(...) from rebundle function to the place where you init bundler.

[danawoodman]

Thanks for the quick reply @andreypopp. I moved it below the bundler = browserify(...); block but still same error. I also tried setting it as a option during initialization of bundler transform: ['reactify']. Any other ideas?

[andreypopp]

Hm... try to bundle with a command line version of browserify:

% browserify -t reactify ./index.js

[danawoodman]

@andreypopp that works for me:

$ browserify -t reactify src/frontend/index.jsx | grep "h1"
      React.createElement("h1", null, "Test")

[danawoodman]

Strange that it would work on command line and not via Gulp. Do my version numbers look correct @andreypopp?

[danawoodman]

@andreypopp I figured it out; for some reason I had Watchify 0.10.2 installed but the current version is 2.1.1. No idea why I had such an old version installed, but updating it fixed the issue. Thanks!

[shantanuranjan]

i am new to react trying to run Griddle-master (from griddle site) test cases from command line
getting same error , \DCPS\datatable-host\test\griddle-test.js:13
return

Test

^
ntaxError: Unexpected token <
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at C:\Users\363598\AppData\Roaming\npm\node_modules\mocha\lib\mocha.js:216:2

can anybody help me here