Help us understand the problem. What is going on with this article?

【Rails】ES6が原因でHerokuへのデプロイ失敗 Uglifier::Error: Unexpected token:~

はじめに

RailsアプリのHerokuへのデプロイにおけるUglifier::Error: Unexpected token:~というエラーに対する解決方法を記載します。

環境

  • macOS Catalina 10.15.1
  • zsh: 5.7.1
  • Ruby: 2.6.5
  • Rails: 5.2.4
  • Docker: 19.03.5
  • docker-compose: 1.24.1

エラー内容

 Uglifier::Error: Unexpected token: name (任意の内容). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).

「ES6を使うにはUglifier.new(:harmony => true)harmony modeを有効にしてね」とのこと。

UglifierはJavaScriptの圧縮をしてくれるgem。ただES5までしか対応していません。

解決策

エラーメッセージの言う通り、本番環境の設定ファイルを編集します。

config/environments/production.rb
config.assets.js_compressor = :uglifier

config/environments/production.rb
config.assets.js_compressor = Uglifier.new(harmony: true)

これで無事本番環境へのデプロイが出来るようになりました!

発生のきっかけ

これまで自分のRailsアプリ内のJavaScriptではずっとvarを使っていたのですが、それをlet(ES6から対応)に変更してみたことで発生しました。

development環境ではUglifierを使わないため上記エラーは発生せず。
ChromeがES6に対応しているので特に問題にならなかったようです。

※余談

uglifierの公式READMEにこんなことが書いてありました。

More stable alternatives for working with ES6 code is to first transpile to ES5 with e.g. babel-transpiler or using Closure Compiler to directly minify ES6 code.

「ES6をより安定して使うにはbabel-transpilerもしくはClosure Compilerを使ってES5をトランスパイルすることです。」
とのこと。

後日、下記gemを使って試してみようと思います。

GitHub - babel/ruby-babel-transpiler: Ruby Babel is a bridge to the JS Babel transpiler.

おわりに

最後まで読んで頂きありがとうございました:bow_tone1:

参考にさせて頂いたサイト(いつもありがとうございます)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away