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のログを確認したところアプリのビルドはできている模様。

- スクショ
![スクリーンショット 2021-07-12 3.34.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482077/c25c6722-b8e7-d097-27bb-740f5e9fc90b.png)

- 翻訳前の画面

``` 
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日更新](https://qiita.com/ashketcham/items/48d64e960d436f8b6f78)

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

- [Rails：Webpacker4.2は/app/public/packs/manifest.jsonherokuでアプリケーションを見つけることができません](https://stackoverflow.com/questions/59161189/rails-webpacker-4-2-cant-find-application-in-app-public-packs-manifest-json-h)
    - 解決策1
        - `extract_css: false` (webpacker.yml)
        - `<%= stylesheet_pack_tag 'application' %> ` をapplication.html.erbから削除する
        - `import '../stylesheets/application'`をapplication.jsに追加
    - 解決策2
        - app/javascriptにapplication.jsを置く
        - ![スクリーンショット 2021-07-14 0.52.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482077/67a47984-1684-9974-720f-d1d5cfb3c739.png)
        - 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](https://qiita.com/tbpgr/items/5f3969fba3b6f8a8e1c0)
    - 解決策 : `heroku restart`をしまくる

- [Railsで1日以上詰まったエラー](https://qiita.com/negisys/items/2bf88659f584fe45b686)
    - `rails webpacker:install`
rails 
    - `webpacker:compile`

- [Rails Webpacker compile error on Production enviorment](https://stackoverflow.com/questions/58520418/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を見つけることができません](https://www.it-swarm-ja.com/ja/heroku/webpacker%E3%81%8Cmanifestjson-heroku-production%E3%81%A7applicationjs%E3%82%92%E8%A6%8B%E3%81%A4%E3%81%91%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93/806400635/)
    - 解決策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日最終更新](https://devcenter.heroku.com/articles/build-docker-images-heroku-yml)
- [独学プログラマ, heroku.ymlを使ったdockerデプロイ](https://blog.cloud-acct.com/posts/u-docker-rails-herokuyml)
- [heroku deb center, Rails6.xでHerokuを使い始める](https://devcenter.heroku.com/articles/getting-started-with-rails6)

#### webpacker関連の記事
- [webpack公式ドキュメント](https://webpack.js.org/)