Rails 　webpacker　ActionView::Template::Errorを解決したい

前提

javascriptをhtml.erbで読み込ませたいのですが全然読み込まれません。

下記の記事を参考にしてjavascriptを読み込ませよう試みました。
https://qiita.com/shuhei_takada/items/99c616029e75af8f3fc0

しかしエラーが出て読み込まれませんでした。（エラー以下参照）
new.jsに記述した<%= javascript_pack_tag 'new' %>でエラーが起こります。

application.html.erb内の<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>は正常に読み込まれていたのですが、new.jsを追加すると読み込ませようとしたらエラーが発生しました。

分かる方がいらっしゃいましたら、ご教授お願い致します。

環境

macbook m1
Rails 6.1.7
webpacker 5.4.3
node.js 18.13.0

実現したいこと

〇〇○.jsファイルをhtml.erbで読み込ませたい

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

イメージ説明

ActionView::Template::Error (Webpacker can't find new.js in /Users/username/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:
{
  "application.js": "/packs/js/application-952883a0d4c34757107e.js",
  "application.js.map": "/packs/js/application-952883a0d4c34757107e.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-952883a0d4c34757107e.js"
      ],
      "js.map": [
        "/packs/js/application-952883a0d4c34757107e.js.map"
      ]
    }
  }
}
):
    27: 
    28: <h1 id="hello">Hello World</h1>
    29: 
    30: <%= javascript_pack_tag 'new' %>
  
app/views/daily_reports/new.html.erb:30

javascript/packs/new.js
1document.addEventListener('DOMContentLoaded', () => {
2  console.log(document.getElementById('hello'));
3});

html.erb
1<h1 id="hello">Hello World</h1>
2<%= javascript_pack_tag 'new' %>

application.js
1import Rails from "@rails/ujs"
2import Turbolinks from "turbolinks"
3import * as ActiveStorage from "@rails/activestorage"
4import "channels"
5
6Rails.start()
7Turbolinks.start()
8ActiveStorage.start()
9
10import "./new"

application.html.erb
1<!DOCTYPE html>
2<html>
3
4<head>
5  <title>GenbaTimely</title>
6  <meta name="viewport" content="width=device-width,initial-scale=1">
7  <%= csrf_meta_tags %>
8  <%= csp_meta_tag %>
9
10  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
11  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
12</head>
13
14<body>
15  <%= alert %>
16  <%= notice %>
17  <%= yield %>
18</body>
19
20</html>

試したこと

rails webpacker:install
rails webpacker:compile

上記どちらもエラーなく成功

node.jsのバージョン変える
v18.12.1
v18.13.0
v19.0.0
v19.4.0

どのバージョンにしても変わらず。

application.jsにimport "./new”記述
new.jsをpacksの外に作り、そこから呼び出す。
html内でnew.jsの内容を<script>タグで囲んで書いてみると動いた( js自体はちゃんと動いている？)

回答1件

自己解決

色々試していたらたまにweb packerのコンパイルエラーが出ていました。

下記のURLでpacks以下のファイルが変わるたびにコンパイルされると書かれていたので、試しにnew.jsの内容を簡単なコードに変えたところエラーがなくなり画面が表示されるようになりました！
コードが間違っていたと思われます。

https://railsguides.jp/webpacker.html

2023/1/25 追記

コードが間違っていたのではなく、application.jsでimport ./newと記述しても更新されていなかったことが原因でした。
ブラウザのデベロッパーツールを見てわかりました。
new.jsのコードを書き換えた時に更新されてapplication.jsも更新され、エラーがなくなったものだと思われます。

2023/1/27 追記
案の定application.jsの変更がブラウザの方に反映されていないことが原因でした。
これの更新の仕方なのですが、application.js内に適当に新しくimport　./hoge/hogeみたいに書いてみてください。
vscodeなどのエディタはjavascript/packs以下にファイルが作られた時にこれが自動的に書かれるのですが、それの変更は反映されません。
手書きでimport文を書いてみてください。するとブラウザの方に変更が反映されると思います。

投稿2023/01/20 01:46

編集2023/01/27 05:47

ruby_of_pokemon

総合スコア2