前提
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。