@tochisuke221 (すけとち)posted at 2021-04-17

Slickの導入でエラーが発生する

Q&A

解決したいこと

Rail6にてスライドの作成のためslickの導入を実施したが、エラーが発生するため、原因の改名とエラーの解消をしたい

発生している問題・エラー

exceptionHook.js:11 jQuery.Deferred exception: $(...).slick is not a function TypeError: $(...).slick is not a function
    at HTMLDocument.<anonymous> (http://localhost:3000/packs/js/slider-d5f00977a35e78d7740e.js:99:16)
    at mightThrow (http://localhost:3000/packs/js/slider-d5f00977a35e78d7740e.js:6788:36)
    at process (http://localhost:3000/packs/js/slider-d5f00977a35e78d7740e.js:6830:19) undefined

slider.js:6 Uncaught TypeError: $(...).slick is not a function
    at HTMLDocument.<anonymous> (slider.js:6)
    at mightThrow (deferred.js:97)
    at process (deferred.js:139)

該当するソースコード

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
    <link href="https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

  </head>
  <body>
         <%= yield %>  <%#本文%> 
  </body>
</html>

例）

slider.js

$(function() {
    console.log("ここでエラー");
    $('.slider').slick({
        dots: true,
    });
});

show.html.erb

<div id="slider" class="slider">

    <%@practice.images.each do |image|%>
    <%= image_tag image %>
    <%end%>
</div>

<%= javascript_pack_tag 'slider' %>

自分で試したこと

jsファイルそのものは確実に読み込めていることから、slickがそもそも読み込まれていないと考え、公式ドキュメント等で直接ファイルを格納する方法などさまざまな方法を実施したが同様のエラーが発生しました。

自らで思い当たる節もなく、仮説すら立てられない状況です、
皆様の知見をお借りできればと思います。
よろしくお願いします。

Are you sure you want to delete the question?