🐥
【🔴エラー対応】Herokuデプロイ時に「Webpaker::Manifest::MissingEntryError」【javascrip
🔷注意
- 本エラーは、「Bootstrap5」+「Rails6」の環境で発生する模様
✅当方の環境
- 開発環境 : Docker
- 本番環境 : heroku
- Gemfileの内容
- ruby 2.7.5
- rails 6.1.5
- webpacker 5.0
✅関連キーワード
- %= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
- Bootstrap導入したらエラーが発生
- Webpaker::Manifest::MissingEntryError
- status=500
- 「application.html.erb」でエラーが発生
- Herokuデプロイ時のエラー
✅エラー内容
- Herokuのログの内容（heroku logs -t -a アプリ名）※一部抜粋
Started GET "/" for at 2022-04-12 07:59:45 +0000
Processing by TopController#index as HTML
Rendered top/index.html.erb within layouts/application (Duration: 0.7ms | Allocations: 292)
Rendered layout layouts/application.html.erb (Duration: 1.8ms | Allocations:
Completed 500 Internal Server Error in 7ms (Allocations: 2415)
ActionView::Template::Error (Webpacker can't find application.css in /app/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
✅エラー箇所
app\views\layouts\application.html.erb
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> #この行でエラーが発生している
✅エラー発生状況/経緯
- Herokuのみでエラーが発生
- ローカル（Docker）では、エラーは発生していない
- BootstrapのCSSをWebpackerで導入(yarnで実施)してからエラーが発生
- BootstrapをCDNで導入した場合は、Herokuではエラーが発生していない
✅エラー原因
- Webpackerの動作が、ローカル環境(development)と本番環境（production）で違うから
✅エラー対応
- Webpackerの動作を、ローカル環境(development)と本番環境（production）共に一緒にする
config\webpacker.yml
production:
<<: *default
compile: true
extract_css: false
cache_manifest: false
🔴補足：上記3つの説明
| オプション | true | false |
|---|---|---|
| compile | Railsページが読み込まれると必要に応じて自動的にコンパイル | 手動でコンパイルが必要 |
| extract_css | linkを出力 | JavaScriptを使って動的にCSSを読み込む |
| cache_manifest | manifest.json の読み込み | manifest.json の読み込まない |
Discussion