Out of memory error on jsx processing

[mbektimirov]

I am using 6to5 with jsx, gulp and browserify. After several file changes 6to5 crashes with error: FATAL ERROR: JS Allocation failed - process out of memory. I've found out that the problem is with my jsx source by simply switching entry point to js file instead jsx. See the console trace and my configuration below. Pay attention on increasing build time after each bundle change.

Tested with the latest 6to5-core

[20:08:04] Running 'bundle'...
[20:08:05] Finished 'bundle' in 73 ms
[BS] File changed: build/app.js
[20:08:10] Running 'bundle'...
[20:08:11] Finished 'bundle' in 88 ms
[BS] File changed: build/app.js
[20:08:13] Running 'bundle'...
[20:08:14] Finished 'bundle' in 367 ms
[BS] File changed: build/app.js
[20:08:18] Running 'bundle'...
[20:08:36] Finished 'bundle' in 17 s
[BS] File changed: build/app.js
[20:08:42] Running 'bundle'...
FATAL ERROR: JS Allocation failed - process out of memory
[1]    23299 abort      gulp

Browserify Gulp task:

var browserify   = require('browserify');
var watchify     = require('watchify');
var bundleLogger = require('../util/bundleLogger');
var gulp         = require('gulp');
var handleErrors = require('../util/handleErrors');
var source       = require('vinyl-source-stream');
var _6to5        = require('./6to5ify');
var externalLibs = require('../external-libs');

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

    var bundler = browserify({
    cache: {}, packageCache: {}, fullPaths: true,
        entries: ['./src/scripts/test_app.jsx'],
        extensions: ['.js', '.jsx'],
        debug: false, 
    paths: ['./src/scripts'],
    fast: true,
    detectGlobals: false
    });


  var bundle = function() {
    bundleLogger.start();

    return bundler
      .external(externalLibs)
      .transform(_6to5)
      .bundle()
      .on('error', handleErrors)
      .pipe(source('app.js'))
      .pipe(gulp.dest('./build/'))
      .on('end', bundleLogger.end);

    if(global.isWatching) {
                bundler = watchify(bundler);
        bundler.on('update', bundle);
    }

    return bundle();
});

test_app.jsx:

var React = require('react');

var Test = React.createClass({

  render: function() {
    return (
      <h1>Test</h1>
    );
  }

});

React.render(<Test />, document.getElementById('root'));

[gaearon]

Node version? Can you put up a reproducible example?
Do you have this issue when using 6to5 directly (as opposed to 6to5ify)?

BTW I find it faster to skip node_modules with 6to5, do you do that?

[mbektimirov]

I put logging to 6to5ify. Generated source code and source maps are duplicated and grow on each transform call even if I reset the data:

// ...
return function (filename) {
   // ...
    var data = "";

    var write = function (buf) {
      data += buf;
      console.log('data', data);
    };

    var end = function () {
      var opts2 = _.clone(opts);
      opts2.filename = filename;

      try {
        var out = to5.transform(data, opts2).code;
      } catch(err) {
        stream.emit("error", err);
        stream.queue(null);
        return;
      }

      stream.queue(out);
      stream.queue(null);
      data = '';
    };

    var stream = through(write, end);
    return stream;
  };

[mbektimirov]

Disabling source maps and ignoring node_modules gives the same result.

[gaearon]

I suppose this is 6to5ify issue then?

[mbektimirov]

I don't think so. Other transformation libs use the same approach with through without any issues. How can I test it in browserify without 6to5ify?

[gaearon]

I put logging to 6to5ify. Generated source code and source maps are duplicated and grow on each transform call even if I reset the data:

Where does duplication occur? I don't quite understand yet.

[mbektimirov]

@gaearon, you're absolutely right, my browserify task was wrongly configured. I put transform outside the bundle function and the problem has gone:

var bundler = browserify({...});
bundler.transform(_6to5.configure({
  ignore: 'node_modules',
  sourceMap: false
}));

var bundle = function() {
  return bundler
    .external(externalLibs)
    // previously it was here
    //.transform(_6to5)
    .bundle()
    .on('error', handleErrors)
    .pipe(source('app.js'))
    .pipe(gulp.dest('./build/'))
   .on('end', bundleLogger.end);
};

This link helped me to catch the problem: https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md
Thanks for your attention 👍

[gaearon]

Thank you for sharing the solution!

[JoshSGman]

This was giving me a headache too, thanks for this!