andreypopp / reactify

[DEPRECATED] Browserify transform for JSX (superset of JavaScript used in React library by Facebook)
MIT License
690 stars 68 forks source link

Watchify transform failing with reactify on error #18

Closed gregtatum closed 9 years ago

gregtatum commented 10 years ago

https://github.com/substack/watchify/issues/64

I'm running into this issue from Watchify which was closed because their tests passed, even though the error still seems to be there. I'm wondering if it's something in the implementation with Reactify.

Terminal output:

[14:09:51] Using gulpfile /MyWebsite/gulpfile.js
[14:09:51] Starting 'watch'...
[14:09:51] Bundle rebuilt
[14:09:51] Finished 'watch' after 15 ms
[14:09:51] Starting 'default'...
[14:09:51] Finished 'default' after 4.53 μs

events.js:72
        throw er; // Unhandled 'error' event
              ^
ReactifyError: /MyWebsite/js/components/SearchDeals.jsx: Parse Error: Line 22: Expected corresponding XJS closing tag for h2 while parsing file: /MyWebsite/js/components/SearchDeals.jsx
    at throwError (/MyWebsite/node_modules/reactify/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2343:21)
    at parseXJSElement (/MyWebsite/node_modules/reactify/node_modules/jstransform/node_modules/esprima-fb/esprima.js:5998:17)
    at parseXJSChild (/MyWebsite/node_modules/reactify/node_modules/jstransform/node_modules/esprima-fb/esprima.js:5920:21)
    at parseXJSElement (/MyWebsite/node_modules/reactify/node_modules/jstransform/node_modules/esprima-fb/esprima.js:5992:31)
    at parseXJSChild (/MyWebsite/node_modules/reactify/node_modules/jstransform/node_modules/esprima-fb/esprima.js:5920:21)
    at parseXJSElement (/MyWebsite/node_modules/reactify/node_modules/jstransform/node_modules/esprima-fb/esprima.js:5992:31)
    at parsePrimaryExpression (/MyWebsite/node_modules/reactify/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2906:20)
    at parseLeftHandSideExpressionAllowCall (/MyWebsite/node_modules/reactify/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2990:61)
    at parsePostfixExpression (/MyWebsite/node_modules/reactify/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3030:20)
    at parseUnaryExpression (/MyWebsite/node_modules/reactify/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3097:16)

package.json versions I'm running

{
  "name": "mywebsite",
  "version": "0.0.1",
  "devDependencies": {
    "browserify": "^5.10.0",
    "gulp": "^3.8.7",
    "gulp-jshint": "^1.8.4",
    "gulp-react": "^1.0.0",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^0.7.3",
    "gulp-sourcemaps": "^1.1.1",
    "gulp-uglify": "^0.3.1",
    "gulp-util": "^3.0.0",
    "jshint-stylish": "^0.4.0",
    "minifyify": "^4.0.4",
    "reactify": "^0.14.0",
    "vinyl-source-stream": "^0.1.1",
    "watchify": "^1.0.5"
  },
  "dependencies": {
    "underscore": "^1.7.0"
  }
glenjamin commented 10 years ago

Can you include the gulp file you're using?

gregtatum commented 10 years ago

Sure thing. I've only recently started using Gulp so it's quite possible that I'm doing it wrong, but that other issue led me to believe it might not be just me.

var gulp = require('gulp');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var source = require('vinyl-source-stream');
var minifyify = require('minifyify');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var gutil = require('gulp-util');
var jshint = require('gulp-jshint');
var react = require('gulp-react');
var sass = require('gulp-sass')

var paths = {
    entry   : './js/main.js',
    js      : ['js/**/*.js', 'js/**/*.jsx', "gulpfile.js"],
    hint    : ['assets/build/bundle.js', 'gulpfile.js'],
    build   : './assets/build/',
    bundleName : 'bundle.js',
    minName : 'bundle.min.js',
    mapName : 'bundle.min.map',
    sass    : 'assets/sass/*.scss',
    css     : './css'
};

function bundle( enableWatching ) {

    var bundler, performBundle;

    bundler = browserify(paths.entry, {
        //Source maps
        debug: true, 

        //watchify args
        cache: {},
        packageCache: {},
        fullPaths: true
    });

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

    performBundle = function() {

        //gulp.start('jshint');

        var stream = bundler
            .transform(reactify)
            .bundle()
            .pipe( source( paths.bundleName ))
            .pipe( gulp.dest( paths.build ));

        gutil.beep();
        gutil.log('Bundle rebuilt');

        return stream;
    };

    bundler.on('update', performBundle);

    return performBundle();

}

gulp.task('default', ['watch']);

gulp.task('watch', function() {
    bundle( true );
});

gulp.task('watch-sass', function() {
    gulp.watch( paths.sass, ['sass'] );
});

gulp.task('sass', function() {

    gulp.src( paths.sass )
        .pipe(sass())
        .pipe(gulp.dest( paths.css ));

});

gulp.task('build', function() {
    gulp.start('bundle');
    gulp.start('minify');
});

gulp.task('bundle', function() {

    bundle();

});

gulp.task('minify', function() {

    gulp.src( paths.build + paths.bundleName )
    .pipe(sourcemaps.init({loadMaps: true}))
        .pipe( uglify() )
        .pipe( rename( paths.minName ) )
        .pipe( gulp.dest( paths.build ))
    .pipe( sourcemaps.write('.'))
    .pipe( gulp.dest( paths.build ));

});

gulp.task('jshint', function() {

    return gulp.src(paths.js)
        .pipe( react() )
        .pipe( jshint('./.jshintrc') )
        .pipe( jshint.reporter('jshint-stylish') );

});
AndrewGrachov commented 9 years ago

Having teh same problems. its all ok on mac - just restart task and enjoy, but suddenly, first bundle on mustdie win8 takes about 200 seconds so it's a world of pain

andreypopp commented 9 years ago

Also https://github.com/floatdrop/gulp-plumber

andreypopp commented 9 years ago

Seems to be Gulp specific issue, closing.

anilsambasivan commented 8 years ago

check if you are closing tag "h2" in same small letters