javascriptのnot findエラー

【質問の箇所】
javascriptでスライダーを作りたく実装中でしたが、その前にjavascriptが見つからないというエラーを解消したい。

【質問の内容】
■ エラー画面のスクリーンショット
https://gyazo.com/cb797ce3eca87ad84eef6add0e40c022

■ 問題に関するVScodeのファイル
app/js/packs/application.js

rails
1// This file is automatically compiled by Webpack, along with any other files
2// present in this directory. You're encouraged to place your actual application logic in
3// a relevant structure within app/javascript and only use these pack files to reference
4// that code so it'll be compiled.
5
6require("@rails/ujs").start()
7require("@rails/activestorage").start()
8require("channels")
9require("../script")
10
11// Uncomment to copy all static images under ../images to the output folder and reference
12// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
13// or the `imagePath` JavaScript helper below.
14//
15// const images = require.context('../images', true)
16// const imagePath = (name) => images(name, true)

app/js/script.js

rails
1'use-strict';
2
3const slider = function(){
4    // Next(Prev)ボタンの取得
5    const next = document.querySelector(".next");
6    const prev = document.querySelector(".prev");
7
8    // liタグのwidthを取得
9    const sliderwidth = document.querySelector(".sliderlist__item");
10    let width = sliderwidth.clientWidth;
11
12    // slider(ul要素、li要素一覧)の取得
13    const sliderlist = document.querySelector(".sliderlist");
14    const sliderlist_item = document.querySelectorAll(".sliderlist__item")
15
16    // カウンターの設定
17    let counter = 0;
18
19    // イベントリスナー (next)
20    next.addEventListener("click", function(){
21        if(counter == sliderlist_item.length - 1) return; //ボタン連打対策
22        prev.style.display = "block";
23        sliderlist.style.transition = ".3s";
24        counter ++;
25        sliderlist.style.transform = "translateX("+ (- width * counter) + "px)";
26
27        sliderlist.addEventListener("transitionend", function(){
28            if(counter == sliderlist_item.length - 1){
29                sliderlist.style.transition = "none";
30                next.style.display = "none";
31            }
32        })
33    });
34
35    // イベントリスナー (prev)
36    prev.addEventListener("click", function(){
37        if(counter == sliderlist_item.length - sliderlist_item.length) return; //ボタン連打対策
38        next.style.display = "block";
39        sliderlist.style.transition = ".3s";
40        counter --;
41        sliderlist.style.transform = "translateX("+ (- width * counter) + "px)";
42
43        sliderlist.addEventListener("transitionend", function(){
44            if(counter == sliderlist_item.length - sliderlist_item.length){
45                sliderlist.style.transition = "none";
46                prev.style.display = "none";
47            }
48        })
49    });
50};
51
52slider();
53

app/views/layouts/application.html.erb

rails
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>MenuApp</title>
7    <%= csrf_meta_tags %>
8    <%= csp_meta_tag %>
9    <link rel="stylesheets" href="style.css">
10    <%= stylesheet_link_tag 'application', media: 'all'%>
11    <%= javascript_pack_tag 'application'%>
12    <link rel="preconnect" href="https://fonts.gstatic.com">
13    <link href="https://fonts.googleapis.com/css2?family=Kufam:ital@1&display=swap" rel="stylesheet">
14  </head>
15
16  <body>
17
18    <%= yield %>
19    
20  </body>
21</html>
22

■ 解決したいこと
動作を確認したかったがその以前にファイルを見つからなというエラーを確認した。その解消方法を知りたいです。
■ 調べた内容とそこから立てた仮説
名前が間違えているなどのケアレスミスの確認、 <script src="./slider.js"></script>をbodyの最下部に配置してみましたが動作を確認できませんでした。
ご教授のほどよろしくお願いいたします。

siruku6

2021/01/17 06:15

Rails6 では、javascriptをviewで読み込むためには以下のような方法になるとの記事がありました。 https://qiita.com/shuhei_takada/items/99c616029e75af8f3fc0#view%E3%81%AE%E8%A8%AD%E5%AE%9A `<script src="./slider.js"></script>` ではなく、viewファイル内dで`javascript_pack_tag`というメソッドを呼び出す必要があるようです。試してみてはいかがでしょう？ `slider`というファイルをどのように導入したのか次第では、`app/js/packs/application.js`でrequireするという方法もあるかと思います。

snsan

2021/01/17 06:35

追加修正の依頼有難うございます。 swiperを導入しようとしたのですが、うまくいかなかったのでファイルを削除しました。にもかかわらずこのエラーが出る理由もよくわからないです。現在の状況では app/views/layouts/application.html.erbの１１行めに<%= javascript_pack_tag 'application'%>を記入し、`app/js/packs/application.js`でrequire("../script")を記述しているので読み込まれてもいいと思うのですが、何が悪さをしているのか不明です。