発生していること

こちらの記事を参考にslickの導入を試みたものの、エラーが発生しどうにもならない状況です。
おそらく、jsファイル自体は読み込みが可能となっているので
slickの読み込みができていないと思われます。

なお、現在使用しているものはRails6です。
#エラー内容

コード

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

slick.js
1
2
3
4const slider=()=>{
5  $(function() {
6    $('.slider').slick();
7  });
8}
9
10
11window.addEventListener("load",slider)
12
13

application.html.erb
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Portfolio</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
9    <link href="https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
10    <%# <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> %>
11    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
12    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
13    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
14    <%# <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> %>
15    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
16    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
17    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
18				
19  </head>
20  <body>
21    <div id="global-container">
22      <div id="container">   <%#ハンバーガーメニューを押した際に横にずれる画面%>  
23        <div class="mobile-menu__cover"></div><%#ずれた時に暗くするための薄膜の役目%>
24        <%= render partial: 'partial/header'%><%#headerメニュー%>
25        <%= render partial: 'partial/flash'%><%#フラッシュ部分%>
26       <div class="main-text">
27         <%= yield %>  <%#本文%>
28       </div>
29       
30      </div>
31       <%= render partial: 'partial/backmenu'%><%#ハンバーガーメニューの裏側分%>
32    </div>
33    <%= javascript_pack_tag 'navbar' %> <%#ここに記載すると共通のレイアウトとなる%>
34  </body>
35</html>
36

show.html.erb
1
2
3<div class="slider">
4
5    <%@practice.images.each do |image|%>
6    <%= image_tag image %>
7    <%end%>
8  </div>
9<%= javascript_pack_tag 'slick' %> 
10 
11    
12