[rails6]<%= javascript_pack_tag ~ %> を記述すると heroku でエラーが出る

前提・実現したいこと

rails 6.0.2
ruby 2.6.3
cloud9
heroku

herokuでwebpakを使いたい。

発生している問題・エラーメッセージ

apprication.erb の head の記述を、

<%= javascript_include_tag "application" %>　　　　　　　
↓
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

に変更したところ、herokuにて下記のエラーが出てページが表示できなくなりました。開発環境では表示できます。

「We're sorry, but something went wrong.」

ruby
1hroku logs
2
3: at=info method=GET path="/" host=myapp.herokuapp.com request_id=48f21ee2-ac29-495a-a8b2-773241aa814a fwd="126.255.21.241" dyno=web.1 connect=0ms service=430ms status=500 bytes=1733 protocol=https
4: I, [2020-11-24T09:58:59.430455 #9]  INFO -- : [48f21ee2-ac29-495a-a8b2-773241aa814a] Completed 500 Internal Server Error in 418ms (ActiveRecord: 138.8ms | Allocations: 65476)
5: F, [2020-11-24T09:58:59.431748 #9] FATAL -- : [48f21ee2-ac29-495a-a8b2-773241aa814a]
6: [48f21ee2-ac29-495a-a8b2-773241aa814a] ActionView::Template::Error (Webpacker can't find application.js in /app/public/packs/manifest.json. Possible causes:
7: 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.
8: 2. webpack has not yet re-run to reflect updates.
9: 3. You have misconfigured Webpacker's config/webpacker.yml file.
10: 4. Your webpack configuration is not creating a manifest.
11: Your manifest contains:
12: {
13: }
14: ):
15: [48f21ee2-ac29-495a-a8b2-773241aa814a]     20:     <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/sandstone/bootstrap.min.css" integrity="sha384-zEpdAL7W11eTKeoBJK1g79kgl9qjP7g84KfK3AZsuonx38n8ad+f5ZgXtoSDxPOh" crossorigin="anonymous">-->
16: [48f21ee2-ac29-495a-a8b2-773241aa814a]     21:     <%#= stylesheet_pack_tag 'application' %>
17: [48f21ee2-ac29-495a-a8b2-773241aa814a]     22:
18: [48f21ee2-ac29-495a-a8b2-773241aa814a]     23:     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
19: [48f21ee2-ac29-495a-a8b2-773241aa814a]     24:     <%#= javascript_include_tag "application", 'data-turbolinks-track': 'reload' %>
20: [48f21ee2-ac29-495a-a8b2-773241aa814a]     25:
21: [48f21ee2-ac29-495a-a8b2-773241aa814a]     26:
22: [48f21ee2-ac29-495a-a8b2-773241aa814a]
23: [48f21ee2-ac29-495a-a8b2-773241aa814a] app/views/layouts/application.html.erb:23
24: at=info method=GET path="/favicon.ico" host=myapp.herokuapp.com request_id=c3a45a26-bec4-4ffb-ad8c-7b64bc90069f fwd="126.255.21.241" dyno=web.1 connect=0ms service=12ms status=200 bytes=207 protocol=https
25

該当のソースコード

// /app/javascript/packs/application.js

require("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
require("jquery");
require("animate.js");

import "bootstrap";
import '../src/application.scss';

//package.json
{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.0",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.3-3",
    "@rails/webpacker": "^4.3.0",
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "node-sass": "^4.14.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

開発環境で同じエラーが出たときはrails webpacker:compleで解消できたので、herokuでwebpackのコンパイルができないのが問題なのかなと思うのですが、ググりまくっても解決しません。
アドバイス頂けると助かります。

行動規範の内容に同意します

回答2件

自己解決

$ rails assets:precompile 実行時に生成される'public/packs/assets'フォルダを削除した後にデプロイし、<head>に下記を追記したところherokuでも正常に動いてくれました。

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

投稿2020/12/11 10:43

編集2021/01/06 11:18

ayus

総合スコア30

rails assets:precompile
か
rails assets:precompile RAILS_ENV=production
をやってみてください。

それでだめなら
/app/public/packs
のフォルダを削除してもう一度、上記のコマンドをやってください

投稿2020/10/11 09:07

yamada_yuuki

総合スコア100

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！