denisov_2023
@denisov_2023 (デニソフ)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

jsファイルが呼び出せない

解決したいこと

viewファイル(show.html.erb)内で、javascript_pack_tag及びstylesheet_pack_tag
を指定してjsファイルを呼び出したいのですが、

Webpacker::Manifest::MissingEntryError in Rooms#show

というエラーが生じております。

エラーの内容を推察すると、Webpackが見つからないということと思われます。
他の記事を参考にしましたが、コードに問題はないかと...
他にどの部分が原因かがわかりません。
解決にご協力いただけないでしょうか。

参考記事

以下、現状のコード

app/views/rooms/show.html.erb
<div id="room">
 <room />
</div>

<script src="app/javascript/packs/room"></script>
<%= javascript_pack_tag 'room' %>
<%= stylesheet_pack_tag 'room' %>
app/javascript/packs/room.js
import Vue from 'vue/dist/vue.esm'
import Room from '../room.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#room',
    data: {
    },
    components: { Room }
  })
})

エラーの内容

Webpacker::Manifest::MissingEntryError in Rooms#show
Showing /Users/taniguroarata/projects/chat-app/app/views/rooms/show.html.erb where line #6 raised:

Webpacker can't find room in /Users/taniguroarata/projects/chat-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-c229f7c7014cf8c8d494.js",
  "application.js.map": "/packs/js/application-c229f7c7014cf8c8d494.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-c229f7c7014cf8c8d494.js"
      ],
      "js.map": [
        "/packs/js/application-c229f7c7014cf8c8d494.js.map"
      ]
    },
    "hello_vue": {
      "js": [
        "/packs/js/hello_vue-a8f8e7394cb89686e662.js"
      ],
      "js.map": [
        "/packs/js/hello_vue-a8f8e7394cb89686e662.js.map"
      ]
    }
  },
  "hello_vue.js": "/packs/js/hello_vue-a8f8e7394cb89686e662.js",
  "hello_vue.js.map": "/packs/js/hello_vue-a8f8e7394cb89686e662.js.map"
}
Extracted source (around line #6):
4
5
6
7


<script src="app/javascript/packs/room"></script>
<%= javascript_pack_tag 'room' %>
<%= stylesheet_pack_tag 'room' %>

Rails.root: /Users/taniguroarata/projects/chat-app

Application Trace | Framework Trace | Full Trace
app/views/rooms/show.html.erb:6
Request
Parameters:

{"id"=>"show"}
Toggle session dump
Toggle env dump
Response
Headers:

None

現状の画面
スクリーンショット 2021-03-20 18.10.40.png

0

1Answer

このエラーについては

application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')  #これを記述し忘れた

application.jsにrequire('jquery') を記述し忘れていたことが
原因のようでした。

みなさま有難うございます。

0Like

Your answer might help someone💌