How to configure a Rails app with ES6 support

Question

I've created this sample app to test ES6 support with asset pipeline.

This setup uses browserify-rails gem and I followed its README instructions.

I can't understand why it works in development but fails when runs the precompile command:

$ env RAILS_ENV=production rake assets:precompile
rake aborted!
ExecJS::ProgramError: Unexpected token: name (Hello) (line: 11569, col: 6, pos: 326685)

Error
    at new JS_Parse_Error (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:11936)
    at js_error (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:12155)
    at croak (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:20622)
    at token_error (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:20759)
    at unexpected (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:20847)
    at semicolon (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:21320)
    at simple_statement (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:24179)
    at /private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:22152
    at /private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:21493
    at block_ (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:26198)
  (in /Users/rodrigora/Projects/browserify_test/app/assets/javascripts/application.js)new JS_Parse_Error ((execjs):2659:11936)
js_error ((execjs):2659:12155)
croak ((execjs):2659:20622)
token_error ((execjs):2659:20759)
unexpected ((execjs):2659:20847)
semicolon ((execjs):2659:21320)
simple_statement ((execjs):2659:24179)
(execjs):2659:22152
(execjs):2659:21493
block_ ((execjs):2659:26198)
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:39:in `exec'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:21:in `eval'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:46:in `call'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/uglifier-2.7.2/lib/uglifier.rb:212:in `run_uglifyjs'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/uglifier-2.7.2/lib/uglifier.rb:179:in `compile'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/uglifier_compressor.rb:25:in `evaluate'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/context.rb:197:in `block in evaluate'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/context.rb:194:in `each'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/context.rb:194:in `evaluate'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/bundled_asset.rb:25:in `initialize'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/base.rb:377:in `new'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/base.rb:377:in `build_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/index.rb:94:in `block in build_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/caching.rb:58:in `cache_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/index.rb:93:in `build_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/base.rb:287:in `find_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/index.rb:61:in `find_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:211:in `block in find_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:257:in `benchmark'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:210:in `find_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:119:in `block in compile'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:118:in `each'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:118:in `compile'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-rails-2.3.3/lib/sprockets/rails/task.rb:70:in `block (3 levels) in define'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/rake/sprocketstask.rb:146:in `with_logger'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-rails-2.3.3/lib/sprockets/rails/task.rb:69:in `block (2 levels) in define'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/bin/ruby_executable_hooks:15:in `eval'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/bin/ruby_executable_hooks:15:in `<main>'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

Gemfile:

source 'https://rubygems.org'

gem 'rails', '4.1.14'
gem 'sass-rails', '~> 4.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0',          group: :doc
gem 'spring',        group: :development
gem "browserify-rails"

app/assets/javascripts/home.js

var Hello = require('./components/hello.jsx');
new Hello();
console.log('hi');

app/assets/javascripts/components/hello.jsx

"use strict";

class Hello {
  constructor() {
    $(window).ready(function() {
      $('body').append('Hello es6!');
    });
  }
}

module.exports = Hello;

package.json

{
  "name": "something",
  "dependencies" : {
    "browserify": "~> 10.2.4",
    "browserify-incremental": "^3.0.1",
    "babelify": "^7.2.0"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  }
}

Answer 1

This is probably related to recent changes in the babel as well as in babelify. Now most of the transformations were pushed out to presets, you can check it out at: https://babeljs.io/docs/plugins/

Now, if you look at the babelify's README you can see how the format should be passed to browserify:

$ browserify -t [ babelify --presets [ es2015 react ] ]

So, now given your context, you probably want the es2015 preset, to do that, firs install the preset:

$ npm install --save-dev babel-preset-es2015

Now, on your config/application.rb configure the command line options properly:

config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 ] ]"

Now you are probably good to go.

If still in trouble, you may remove all the compiled assets and maybe the tmp/* files

I was able to get it up and running in your example.