browserify-rails: rake assets:precompile doesn't work when using ES6 on Heroku

Hey Guys,

I’m struggling to precompile my Javascript files. I already tried the solutions of #133 and #132.

To exemplify the issue, I created this app. It is a “empty” rails app with browserify-rails gem and 1 JS file using ES6 syntax.

Some relevant files:

package.json

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

config/application.rb

config.browserify_rails.commandline_options = "-t babelify --extension-'.jsx'"

app/assets/javascripts/components/hello.jsx

"use strict";

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

I’m using jsx extension because I intend to add react to this project

The error is:

ExecJS::ProgramError: Unexpected token: name (Hello) (line: 11569, col: 6, pos: 326687)

Error
    at new JS_Parse_Error (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-74579-14fk3xfjs:2659:11936)
    at js_error (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-74579-14fk3xfjs:2659:12155)
    at croak (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-74579-14fk3xfjs:2659:20622)
    at token_error (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-74579-14fk3xfjs:2659:20759)
    at unexpected (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-74579-14fk3xfjs:2659:20847)
    at semicolon (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-74579-14fk3xfjs:2659:21320)
    at simple_statement (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-74579-14fk3xfjs:2659:24179)
    at /private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-74579-14fk3xfjs:2659:22152
    at /private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-74579-14fk3xfjs:2659:21493
    at block_ (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-74579-14fk3xfjs: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)

About this issue

  • Original URL
  • State: open
  • Created 8 years ago
  • Comments: 33 (18 by maintainers)

Commits related to this issue

Most upvoted comments

I can’t spend more time on it at the moment but if you comment out the line for this:

config.assets.js_compressor = ...

In config/environments/production.rb that’ll make it work. At least it did for me w/ upgraded gems but should work even w/o upgraded gems. Not sure what is going on though. It might be that by using .js with ES6, it goes through uglify too early – maybe try using the .es6 extension as mentioned in the README of this project (I don’t use that option so not sure).

+13
cymen on Feb 3, 2016

Yeah, looks like you don’t have a processor to handle jsx in there. Not sure if the order matters, but you may need to do [ react es2015 ], with react first.

+3
mockdeep on May 2, 2016

yeah I am using the react-rails gem

@Rodrigora @mockdeep thanks for the help guys, this works! 🙏

+2
rloomba on May 2, 2016

Hey @rloomba,

are you using the react-rails gem?

If not, change the command lines options to this:

config.browserify_rails.commandline_options ="-t [ babelify --presets [ es2015 react ] ]"
+2
Rodrigora on May 2, 2016

Hey,

this is related to recent babel changes. Better explained here: http://stackoverflow.com/questions/35178096/how-to-configure-a-rails-app-with-es6-support

I had to add babel-preset-es2015 module to my package.json and changed browserify options:

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

@cymen I can a create a PR updating the README if you think this is relevant

+2
Rodrigora on Feb 10, 2016

@jamesfzhang I think you need to move those two dev dependencies to regular dependencies as your build on Heroku is probably production not dev. So move these two lines up into dependencies:

    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0"
+1
cymen on Feb 17, 2016
Read more comments on GitHub
← pbkdf2: Tests failing for Node 6
resolve: bugfix in v1.18 breaks when a core module is not available in a given node version →