Webpacker: rake assets:precompile fails

[iamraffe]

Everything seems to be working fine in development, however when trying to deploy I'm getting an error.

Output of running command is as follows:

rake assets:precompile RAILS_ENV=production
yarn install v0.27.5
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.93s.
rake aborted!
ExecJS::RuntimeError: SyntaxError: Unexpected token: name (key)
JS_Parse_Error.get ((execjs):3538:621)
(execjs):4060:47
(execjs):1:102
Object.<anonymous> ((execjs):1:120)
Module._compile (module.js:570:32)
Object.Module._extensions..js (module.js:579:10)
Module.load (module.js:487:32)
tryModuleLoad (module.js:446:12)
Function.Module._load (module.js:438:3)
Module.runMain (module.js:604:10)
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

[rossta]

More info might be helpful. What version of node.js are you using? Can you provide any other info about your setup? (Ruby, Rails, Webpacker versions etc)

[iamraffe]

Sorry you're totally right.

I am trying to deploy to AWS Elastic Beanstalk with Ruby 2.3.

From my Gemfile:

webpacker (2.0)
rails (5.1.2)

During the weekend I isolated the issue to something having to do with the uglifier gem. In my production.rb file I had this line:
config.assets.js_compressor = :uglifier
which after I commented made the error go away.

Am I wrong in using uglifier with webpack?

Thanks!

[gauravtiwari]

@iamraffe You don't need uglifier with Webpack. The Webpacker already does this if you run webpacker:compile - https://github.com/rails/webpacker/blob/master/lib/install/config/webpack/production.js#L16. The error you are getting is related to JS syntax that ruby uglifier can't recognise (running same thing twice).

[iamraffe]

I get that.

But what about the code that's not in the "packs" folder (regular rails asset pipeline)? Does webpack watch that as well?

We are migrating projects with JS in the assets folder that was previously handled by the rails uglifier.

[gauravtiwari]

No, not unless it's specified in webpacker.yml as path

[iamraffe]

Right, but how can you have two entry points in webpacker.yml?

It seems it is expecting a string.

[gauravtiwari]

Could you post your webpacker.yml please?

[iamraffe]

It's the standard one I believe

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs

  extensions:
    - .coffee
    - .erb
    - .js
    - .jsx
    - .ts
    - .vue
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default

  dev_server:
    host: 0.0.0.0
    port: 8080
    https: false

test:
  <<: *default

  public_output_path: packs-test

production:
  <<: *default

[gauravtiwari]

Right, but how can you have two entry points in webpacker.yml?

Just create two files under packs folder. Oh do you mean do you wanna watch two directories for modules?

[iamraffe]

Yeah, I mean. Like I said, we're migrating a project to React, but there's a lot of JS code still in the app/assets/javascripts directory.

So if I can't use uglifier for the code on that directory, how can I make it so that webpack takes care of it?

[tthomas7]

Sorry to resurrect this thread, but I found it on google and I'm having this exact problem. Did you ever find a solution?

[gauravtiwari]

@tthomas7 Could you please post the issue with log?

[tthomas7]

Sorry, I probably should have mentioned @iamraffe to see if he had a solution as our issues are very similar. I'm in the process of moving my javascript code away from the rails asset pipeline into webpacker but I haven't migrated all of it yet. And the problem seems to be with the rails uglifier and the webpack generated code.

If I remove this line from production.rb, the problem goes away.
config.assets.js_compressor = :uglifier

With that line in place though I can't deploy to Heroku because compiling the assets fails. And without that line all the code I have yet to migrate to webpack doesn't get minified.

RAILS_ENV=production bundle exec rake assets:precompile
yarn install v1.3.2
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
success Already up-to-date.
✨  Done in 0.74s.
rake aborted!
ExecJS::RuntimeError: SyntaxError: Unexpected token: operator (>)
JS_Parse_Error.get ((execjs):3538:621)
(execjs):4060:48
(execjs):1:102
Object.<anonymous> ((execjs):1:120)
Module._compile (module.js:635:30)
Object.Module._extensions..js (module.js:646:10)
Module.load (module.js:554:32)
tryModuleLoad (module.js:497:12)
Function.Module._load (module.js:489:3)
Function.Module.runMain (module.js:676:10)
/Users/thomasthomas/.rvm/gems/ruby-2.4.2@rails_5_0/gems/execjs-2.7.0/lib/execjs/external_runtime.rb:39:in `exec'
/Users/thomasthomas/.rvm/gems/ruby-2.4.2@rails_5_0/gems/execjs-2.7.0/lib/execjs/external_runtime.rb:21:in `eval'
/Users/thomasthomas/.rvm/gems/ruby-2.4.2@rails_5_0/gems/execjs-2.7.0/lib/execjs/external_runtime.rb:46:in `call'
/Users/thomasthomas/.rvm/gems/ruby-2.4.2@rails_5_0/gems/uglifier-3.2.0/lib/uglifier.rb:195:in `run_uglifyjs'
/Users/thomasthomas/.rvm/gems/ruby-2.4.2@rails_5_0/gems/uglifier-3.2.0/lib/uglifier.rb:157:in `compile'
/Users/thomasthomas/.rvm/gems/ruby-2.4.2@rails_5_0/gems/sprockets-3.7.1/lib/sprockets/uglifier_compressor.rb:53:in `call'
.....

I know that once I've migrated all the code to webpacker I won't need the rails uglifier and fortunately I have a relatively small code base so I'm working on that. But I suspect others will struggle here more than I have.

[iamraffe]

@tthomas7 sorry for the late response. I ended up disabling uglifier.

To be honest still don't have a solution for this, but haven't worked much on it. Instead I've been working on moving our old JS code within webpacker (to React components).

[gauravtiwari]

Not sure why two are conflicting anyway, when I run RAILS_ENV=production bundle exec rails assets:precompile both assets are compiled fine:

[gauravtiwari]

Probably you got es6 code in sprockets?

[joemsak]

@iamraffe @tthomas7

https://github.com/lautis/uglifier/issues/116#issuecomment-347386669

Same exact issue, this fixed it for me

[tthomas7]

@joemsak Thanks!

[criticerz]

Ran into this as well.

I had copy & pasted a piece of code (had a hashrocket function) from a React component into a regular javascript asset (that uses sprockets). Removed it from that file and works.