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

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

新規登録して質問してみよう
ただいま回答率
85.53%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

873閲覧

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

ruby_of_pokemon

総合スコア2

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2023/01/19 14:08

編集2023/01/27 14:47

前提

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

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

https://railsguides.jp/webpacker.html

2023/1/25 追記

コードが間違っていたのではなく、application.jsimport ./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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問