13
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ActionView::Template::Error (Webpacker can't find application.css)で沼にハマった時の解決方法

Posted at

##動作環境

  • Ruby 2.6.6
  • Rails 6.1.0
  • Docker 20.10.2
  • Heroku

##経緯
Railsでアプリを作っており、Herokuにデプロイしたが、その際にHerokuでエラーが発生してしまった。

##エラー内容
rails_12factorを追加して、herokuでもrailsのログが見れるようにしている。

ActionView::Template::Error (Webpacker can't find application.css in /myapp/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
2021-01-25T01:15:35.492764+00:00 app[web.1]: unless you are using the `webpack -w` or the webpack-dev-server.
2021-01-25T01:15:35.492765+00:00 app[web.1]: 2. webpack has not yet re-run to reflect updates.
2021-01-25T01:15:35.492765+00:00 app[web.1]: 3. You have misconfigured Webpacker's config/webpacker.yml file.
2021-01-25T01:15:35.492766+00:00 app[web.1]: 4. Your webpack configuration is not creating a manifest.

##解決方法
これは__application.cssをwebpackerで管理できてないことが原因__で発生したエラーであった。

試しにエラーが出ていたviewファイルを確認してみる。

application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

そういえばtailwindを導入した際に、記事の内容に従ってstylesheet_linkからpackに書き換えたような、、、

application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

中身を書き換えたら無事に本番環境でデプロイできました!

どうやらstylesheet_pack_tagをつかうと、webpackerからスタイルシートを呼び出すみたいでした。
自分の場合はcssをsprocketsで管理していたので、stylesheet_link_tagを使う必要があったようでした。

エラー文のPossible causes以降の文章が答えだと思って、ずっと頭を悩ませていましたが全く別のところに原因が存在していました。
まずはじめに、__「webpackerでapplication.cssが見つからない」__というところに注目して取り組んでいたらもっと苦労せずに解決できていたと思います。

##最後に
今回のエラーを経て、
エラー文の怪しいところに注目して解決をするだけではなく、しっかりとエラーの本質を理解して解決に当たるということが重要であると感じました。

しかし、ローカル環境では何の問題もなかったのになぜ本番環境のみでエラーが発生したんだろう、、、?

13
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?