Webpacker: ES6 syntax fails to compile even on a clean new app with --webpack=stimulus

[joelsouza]

ES6 syntax fails to compile even on a clean new app.

Expected Behavior

Run RAILS_ENV=production rake assets:precompile and get compiled assets without errors

Current Behavior

Uglifier::Error: Unexpected token: punc ({). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).

Steps to Reproduce

$ rails -v
-> Rails 5.1.5

$ rails new rails-stimulus-app --webpack=stimulus
$ cd rails-stimulus-app
$ RAILS_ENV=production rake assets:precompile --trace

Context (Environment)

Rails 5.1.5

# Gemfile
gem 'webpacker', '~> 3.2'

Detailed Description

$ rails -v
-> Rails 5.1.5

$ rails new rails-stimulus-app --webpack=stimulus
$ cd rails-stimulus-app
$ RAILS_ENV=production rake assets:precompile --trace

** Invoke assets:precompile (first_time)
** Invoke assets:environment (first_time)
** Execute assets:environment
** Invoke environment (first_time)
** Execute environment
** Invoke yarn:install (first_time)
** Execute yarn:install
yarn install v1.3.2
[1/4] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.59s.
** Execute assets:precompile
I, [2018-02-22T12:37:13.798156 #2626]  INFO -- : Writing /Users/joelsouza/Code/drafts/rails-stimulus-app/public/assets/application-4a1d9d80b89c980f5f64004484cb2e515409eb7565c72a78447d2c6be5636082.js
I, [2018-02-22T12:37:13.802969 #2626]  INFO -- : Writing /Users/joelsouza/Code/drafts/rails-stimulus-app/public/assets/application-4a1d9d80b89c980f5f64004484cb2e515409eb7565c72a78447d2c6be5636082.js.gz
I, [2018-02-22T12:37:13.810647 #2626]  INFO -- : Writing /Users/joelsouza/Code/drafts/rails-stimulus-app/public/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css
I, [2018-02-22T12:37:13.810820 #2626]  INFO -- : Writing /Users/joelsouza/Code/drafts/rails-stimulus-app/public/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css.gz
rake aborted!
Uglifier::Error: Unexpected token: punc ({). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/uglifier-4.1.6/lib/uglifier.rb:234:in `parse_result'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/uglifier-4.1.6/lib/uglifier.rb:216:in `run_uglifyjs'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/uglifier-4.1.6/lib/uglifier.rb:168:in `compile'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/uglifier_compressor.rb:53:in `call'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/uglifier_compressor.rb:28:in `call'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/processor_utils.rb:75:in `call_processor'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/processor_utils.rb:57:in `block in call_processors'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/processor_utils.rb:56:in `reverse_each'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/processor_utils.rb:56:in `call_processors'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/loader.rb:134:in `load_from_unloaded'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/loader.rb:60:in `block in load'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/loader.rb:317:in `fetch_asset_from_dependency_cache'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/loader.rb:44:in `load'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/cached_environment.rb:20:in `block in initialize'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/cached_environment.rb:47:in `load'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/base.rb:66:in `find_asset'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/base.rb:73:in `find_all_linked_assets'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/manifest.rb:142:in `block in find'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/legacy.rb:114:in `block (2 levels) in logical_paths'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:228:in `block in stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:212:in `block in stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `each'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:227:in `stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:231:in `block in stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:212:in `block in stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `each'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:227:in `stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:231:in `block in stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:212:in `block in stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `each'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:227:in `stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:231:in `block in stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:212:in `block in stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `each'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:227:in `stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:231:in `block in stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:212:in `block in stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `each'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:227:in `stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:231:in `block in stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:212:in `block in stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `each'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:209:in `stat_directory'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/path_utils.rb:227:in `stat_tree'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/legacy.rb:105:in `each'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/legacy.rb:105:in `block in logical_paths'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/legacy.rb:104:in `each'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/legacy.rb:104:in `logical_paths'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/manifest.rb:140:in `find'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/sprockets/manifest.rb:185:in `compile'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-rails-3.2.1/lib/sprockets/rails/task.rb:68:in `block (3 levels) in define'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-3.7.1/lib/rake/sprocketstask.rb:147:in `with_logger'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/sprockets-rails-3.2.1/lib/sprockets/rails/task.rb:67:in `block (2 levels) in define'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/task.rb:251:in `block in execute'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/task.rb:251:in `each'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/task.rb:251:in `execute'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/task.rb:195:in `block in invoke_with_call_chain'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/2.4.0/monitor.rb:214:in `mon_synchronize'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/task.rb:188:in `invoke_with_call_chain'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/task.rb:181:in `invoke'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/application.rb:160:in `invoke_task'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/application.rb:116:in `block (2 levels) in top_level'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/application.rb:116:in `each'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/application.rb:116:in `block in top_level'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/application.rb:125:in `run_with_threads'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/application.rb:110:in `top_level'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/application.rb:83:in `block in run'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/application.rb:186:in `standard_exception_handling'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/lib/rake/application.rb:80:in `run'
/Users/joelsouza/.rbenv/versions/2.4.2/lib/ruby/gems/2.4.0/gems/rake-12.3.0/exe/rake:27:in `<top (required)>'
/Users/joelsouza/.rbenv/versions/2.4.2/bin/rake:23:in `load'
/Users/joelsouza/.rbenv/versions/2.4.2/bin/rake:23:in `<main>'
Tasks: TOP => assets:precompile

[gauravtiwari]

@joelsouza Thanks for filing the issue. I have reproduced this bug.

Running RAILS_ENV=production rake webpacker:precompile --trace compiles the webpacker assets fine so it seems Rails uglifier is causing the problem here.

Try replacing

# production.rb
config.assets.js_compressor = :uglifier
# with
config.assets.js_compressor = Uglifier.new(harmony: true)

or comment it out entirely.

[guilleiguaran]

I've confirmed this but I'm not sure why Sprockets/Uglifier are causing problems with assets that should be managed by Webpacker.

[gauravtiwari]

@guilleiguaran Yeah strange but from compilation logs, notice sprockets is compiling stimulus files so perhaps it's noting to do with webpacker but stimulus files are being added to sprockets somehow and is compiled? (it's not in application.js)

[guilleiguaran]

/cc @javan maybe you have any idea about this?

[javan]

It looks like Sprockets is compiling application.js from the Stimulus node module: https://unpkg.com/@stimulus/core@1.0.1/dist/module/src/application.js

I suspect this isn't a webpacker issue, but rather a load path conflict with Sprockets. 🤔

[guilleiguaran]

I couldn't reproduce this with last sprockets beta (v4.0.0.beta6), we need to release a final version of sprockets v4.0.

Closing since this isn't a issue with webpacker

[sunnyrjuneja]

Hey @guilleiguaran, any idea if this is because sprockets now supports ES6 or the load path conflict was resolved?

[ansonhoyt]

I found the underlying sprockets issue is being tracked in https://github.com/rails/sprockets/issues/567

The maintainer, @schneems, recommends upgrading to Sprockets 4 which doesn't have the issue.

[seanWLawrence]

If anyone is still running into this issue, change config.assets.js_compressor = :uglifier to config.assets.js_compressor = Uglifier.new(harmony: true) and it should work!

Reference: https://github.com/lautis/uglifier/issues/127

[davidmtobias]

config.assets.js_compressor = Uglifier.new(harmony: true) works but, after inspecting the final code with Chrome Console, the final uglifier javascript file has several erorrs that don't appear if I don't invoke js_compressor setting config.assets.js_compressor = false

[jakeNiemiec]

@davidmtobias Uglifier has known issues, see: https://github.com/rails/webpacker/pull/1816

PR about the root issue: https://github.com/webpack/webpack/pull/8036#issue-215739532

[seanWLawrence]

@davidmtobias Perhaps try updating your Uglifier gem?

That helped me avoid some issues with “Invalid escape sequence” errors on my application.js file (which uses Sprockets/Rails) and allowed Webpacker to build my other files without failing on Rails’ ‘assets:precompile’ task.

Are the issues coming from your Webpacker files?

[p8]

Commenting out the following line in config/initializers/assets.rb worked for me:

Rails.application.config.assets.paths << Rails.root.join('node_modules')

[ziaulrehman40]

https://github.com/reactjs/react-rails/issues/546#issuecomment-577671904 fixed issue for us.