【Rails】Herokuにデプロイする時のES6コンパイルエラー解決方法

rails

こんにちは。菜笑なえです。

前回に引き続きHerokuデプロイ時のエラー解決法についての備忘録です。

今回はプロダクションモードで動かす時のES6コンパイルエラーについてですが、Herokuのbundlerに関するエラーでお困りの方はこちらの記事もご覧ください。

解決法

config/environments/production.rbconfig.assets.js_compressor 部分を書き換えます。

変更前

config.assets.js_compressor = :uglifier

変更後

config.assets.js_compressor = Uglifier.new(harmony: true)

変更したら、差分をコミットしてデプロイしたら完了です!

$ git add .
$ git commit -m 'fix js_compressor'
$ git push heroku master

ES6の書き方でJavaScriptを記述していると、本番でコンパイルできないよとエラーが発生します。

自分はlet を使用していたところがダメでした。

プロダクションモード以外では、uglifier でコンパイルしていなかったので、エラーが発生せずにうまいこといってたみたいです。

また、あらかじめローカル環境下で、プロダクションモードを指定して実行できるか?を確認する方法は後半に書いています。

エラー内容

(省略)

remote:        Bundle completed (166.04s)
remote:        Cleaning up the bundler cache.
remote: -----> Installing node-v10.15.3-linux-x64
remote: -----> Detecting rake tasks
remote: -----> Preparing app for Rails asset pipeline
remote:        Running: rake assets:precompile
remote:        Yarn executable was not detected in the system.
remote:        Download Yarn at https://yarnpkg.com/en/docs/install
remote:        rake aborted!
remote:        Uglifier::Error: Unexpected token: name (urls). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true).

(省略)

remote:        Tasks: TOP => assets:precompile
remote:        (See full trace by running task with --trace)
remote:
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !    Push rejected to post-link-download.
remote:
To https://git.heroku.com/post-link-download.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/post-link-download.git'

ローカル環境でプロダクションモード実行

今回のコンパイルが通るかどうかの確認だけであれば、プロダクションモードでRailsを起動する必要はありません。

assets:precompil でコンパイルできるかどうかの確認だけを行なっていきます。

Yarnをダウンロード

$ brew install yarn
$ yarn -v
1.16.0

これでYarnのバージョンが表示されれば、ダウンロード完了です。

ちなみに、YarnとはJavaScriptのパッケージマネージャーだそうです。npmみたいなものですね。

assets:precompil 実行

$ bundle exec rake assets:precompile RAILS_ENV=production
yarn install v1.16.0
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 0.06s.

無事にDoneが表示され終了したら、コンパイル完了ということですね。

もしYarnが入っていない状態で、実行するとダウンロードするようにメッセージが表示されます。

$ bundle exec rake assets:precompile RAILS_ENV=production
Yarn executable was not detected in the system.
Download Yarn at https://yarnpkg.com/en/docs/install

環境

macOS Mojave 10.14.5
Ruby 2.6.3
Bundler 2.0.2
Rails 5.2.3
Yarn 1.16.0

おわりに

デプロイでのエラーは何度遭遇しても焦りますよね。

プロダクションモードと、ローカルでコンパイルに使用しているものが違うなんて思っても見なかったので、余計にびっくりです。

公開することで学ぶこともたくさんあると思うので、これからも小さくてもいいから、サービス作って公開を繰り返していきたいですね!

また、Herokuは2019年6月末に、対応Bundlerのバージョンも変えたりしてるので、bundlerに関するエラーでお困りの方はこちらの記事もご覧ください。

SNS

Twitter:@nae310_
Instagram:310nae