Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
28
Help us understand the problem. What is going on with this article?
@terufumi1122

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

More than 1 year has passed since last update.

はじめに

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:

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

28
Help us understand the problem. What is going on with this article?
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
terufumi1122
ストックついでに「いいね!」もしてもらえると嬉しいです。 HTML/CSS/JavaScript/Vue.js/Ruby/Ruby on Rails/Java/Kotlin/Android

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
28
Help us understand the problem. What is going on with this article?