はじめに
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.assets.js_compressor = :uglifier
↓
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.
おわりに
最後まで読んで頂きありがとうございました