【Rails6】ActionView::Template::Error Webpacker エラーを解決したい

Question

お世話になっております。slide-show.jsというJSファイルをRails6アプリで読み込みさせたいのですが、エラーが出て解決できません。 エラーについて、webpackerの仕様で、所定ディレクトリにJSファイルを配置させることが必要という情報を見つけて、指定されたディレクトリにファイルを配置しましたが、解決されない状態です・・・
JS関連ファイルについては、Rails newした段階のデフォルトの状態となっております。application.jsについてはエラーが出ません。

アドバイス頂ければ幸いです。お願いします。

エラー内容

ActionView::Template::Error at /
Webpacker can't find slide-show in /Users/user_name/projects/app_name/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-9afcbb5693aa87623e69.js",
  "application.js.map": "/packs/js/application-9afcbb5693aa87623e69.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-9afcbb5693aa87623e69.js"
      ],
      "js.map": [
        "/packs/js/application-9afcbb5693aa87623e69.js.map"
      ]
    }
  }
}

関連コード

• application.html.haml

!!!
%html
  %head
    %meta{content: "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/
    %title Badsuru
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    = yield

• _main.html.haml

= javascript_pack_tag 'slide-show'

.main-visual
  = image_tag '/images/visual-bg.jpg', alt: '画像背景', height: '522px', width: '100%', class: 'main-visual__img--bg'
  .main-visual__images
    = image_tag '/images/visual-1.jpg', id: "main-visual__images-js", alt: '画像背景', class: 'main-visual__img--main'

• manifest.json

{
  "application.js": "/packs/js/application-9afcbb5693aa87623e69.js",
  "application.js.map": "/packs/js/application-9afcbb5693aa87623e69.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-9afcbb5693aa87623e69.js"
      ],
      "js.map": [
        "/packs/js/application-9afcbb5693aa87623e69.js.map"
      ]
    }
  }
}

• slide-show.js((/Users/user_name/projects/app_name/public/packs/にて配置)

const images = ["/public/images/visual-1.jpg", "/public/images/visual-2.jpg", "/public/images/visual-3.jpg"]

let num = -1

function slideShow_timer(){
  if (num === 2){
    num = 0;
  }
  else{
    num ++;
  }

  document.getElementById("main-visual__images-js").src = images[num];
  
}

setInterval(slideShow_timer, 1000);

• manifest.js(/app/assets/config/manifest.jsにて配置)

//= link_tree ../images
//= link_directory ../stylesheets .css

Comments

[maisumakun]

slide-show.jsは、どこかでライブラリとして公開されているものでしょうか？それとも、内製して公開していないようなものでしょうか？

[moai891]

ご回答ありがとうございます。自作したものです。

[maisumakun]

あと、全体にレイアウトが崩れていてものすごく読みづらいので、修正していただけませんでしょうか？

[moai891]

大変失礼しました。修正しました！！

[maisumakun]

「manifest.js」と書いてありますが、この内容は「manifest.json」のものではないでしょうか？

[moai891]

度々申し訳ございません。manifest.jsonです。

[maisumakun]

（manifest.jsの内容を確認したいと書いておいたほうが良かったですね…失礼しました）

[moai891]

返信ありがとうございます。manifest.jsの追加しました！

Answer 1

webpackerの設定を変更していなければ、
app/javascript/packs に slide-show.js を配置して、
読み込みたいviewで(ここは変更なし)

= javascript_pack_tag 'slide-show'

すればいけるかと。

Comments

[moai891]

ご回答ありがとうございます！！無事に解決できました。

このエラー、はまってしまった理由として、エラー文にWebpacker can't find slide-show in /Users/user_name/projects/app_name/public/packs/manifest.json.と、publicディレクトリ配下を指し示していたことが挙げられます。

なぜこのパスをエラーでは指摘したのでしょうか？差し支えなければ教えて頂けますでしょうか？

[Cojiro]

= javascript_pack_tag 'slide-show'
でその場所のファイルを読みにいっているからです。

webpack(webpacker)については、ご自身で理解してほしいですが、
簡単にいうと、
自分の書いたソースをまとめてくれるツールで、
まとめてくれたソースがエラーの時に表示されたパスに吐き出されている
ということです。

[moai891]

ご回答ありがとうございます。
webpackerについて、理解が浅く申し訳ございません。

本来であればwebpackがまとめてコンパイルしたデータがpublic/packs配下にあるはずだが、slide-show,.jsファイルが適切な箇所に配置されていなかったため、コンパイルされず、該当のエラーを出したということでしょうか？