herokuへデプロイする際のWebpaker::Manifest::MissingEntryErrorというエラーの対処法まとめ

1. 開発環境の情報

• 開発環境 : Docker
• 本番環境 : heroku
• Gemfileの内容
  • ruby 2.7.3
  • rails 6.1.3
  • webpacker 5.4

2. エラー内容

エラーの内容は, herokuへデプロイ後にアプリを開こうとすると「Webpacker::Manifest::MissingEntryError in StaticPages#home」と表示されて表示することができない状況

引っかかっている原因のコードは <%= javascript_pack_tag 'application', 'data-turbolinks-track':'reload' %>

また、heroku logs --tailでherokuのログを確認したところアプリのビルドはできている模様。

• スクショ
  

• 翻訳前の画面

Webpacker can't find application.js in /myapp/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:
{
}

• 翻訳後の画面

webpackerは/myapp/public/packs/manifest.jsonの中でapplication.jsを見つけることができません

可能性のある原因:
1. あなたが'webpack -w'かwebpack-deb-serverを使用しているのではない限り, webpacker.ymlのcompileの値を環境に合わせてtrueに設定してください。
2. webpackはアップデートを反映するための再実行がまだされていない
3. あなたは webpackerのconfig/webpacker.ymlファイルの設定が間違っています
4. あなたのwebpackの設定はmanifestを作っていません

あなたのmanifestが含んでいるもの:
{
}

現時点でできること

• ローカル環境では普通に動く。
  • つまりwebpack-deb-serverは動く
• javascript pack tagをapplication.html.erbから排除すると、トップページが表示される。しかし、javascriptが効いていないのか、ローカル時と異なる挙動をする

3. エラーに関係する記事と解決方法まとめ

• 自分の場合
  herokuにプッシュするブランチをトピックブランチではなくマスターブランチに変更したら, 何故か動いた(原因不明)。

git push heroku <branch_name>:master
↓
git push heroku master

• Qiita, Webpacker::Manifest::MissingEntryError, 2021年12月21日更新

  • 原因: nodejsを管理するyarnがインストールされていない
  • 解決策: docker-compose run --rm web yarn install

• Rails：Webpacker4.2は/app/public/packs/manifest.jsonherokuでアプリケーションを見つけることができません

  • 解決策1

    • extract_css: false (webpacker.yml)
    • <%= stylesheet_pack_tag 'application' %> をapplication.html.erbから削除する
    • import '../stylesheets/application'をapplication.jsに追加

  • 解決策2

    • app/javascriptにapplication.jsを置く
    • 
    • stylesheetsをassetsから読み込ませたい場合は config/webpacker.ymlにresolved_paths: ['app/assets']を追加数r
    • app/javasvript/packs/application.jsに以下の行をコピーするimport 'stylesheets/application'

  • 解決策3

    • bundle exec rails webpacker:install

  • 解決策4

    • webpackerの再インストール bundle exec rails webpacker:install

    • ローカルと本番環境の両方でアセットを再コンパイルする

      • rails assets:precompile
      • rails assets:precompile RAILS_ENV=production

    • rm -rf node_modules

    • rails assets:clobber

    • rails assets:precompile

    • rails assets:precompile RAILS_ENV=production

    • config/environments/production.rbに
      config.assets.compile = false

• Ruboty | Heroku にデプロイした ruboty のプロセスが status 143 で exit してしまう #ruboty #heroku

  • 解決策 : heroku restartをしまくる

• Railsで1日以上詰まったエラー

  • rails webpacker:install
    rails
  • webpacker:compile

• Rails Webpacker compile error on Production enviorment

  • 解決策1
    • yarn add @rails/webpacker
    • bundle update webpacker
  • 解決策2
    • rm -rf bin/webpack*
    • rails webpacker:install
    • RAILS_ENV=production rails webpacker:compile
      • 使えなかったので、次のコードを実行。rails webpacker:compile RAILS_ENV=production

• Webpackerがmanifest.json Heroku Productionでapplication.jsを見つけることができません

  • 解決策1
    • webpacker 3.5をインストールする
      • gemfileのwebpackerのヴァージョンを最新(5.4)から3.5にした。4.0.7でも試した。
  • 解決策2
    • フォルダnode_modulesを削除
    • yarn add @Rails/webpacker@next
    • bundle exec Rails webpacker:install

デプロイ関連の記事

• Heroku Dev Center, Building Docker Images with heroku.yml, 2020年12月29日最終更新
• 独学プログラマ, heroku.ymlを使ったdockerデプロイ
• heroku deb center, Rails6.xでHerokuを使い始める

webpacker関連の記事

• webpack公式ドキュメント