前提・実現したいこと
ここに質問の内容を詳しく書いてください。
JavaScriptを利用して簡単なウェブサイトを作っています。
slickを使って画像が自動でスクロールされるところを実装中にに以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
下記の2つのエラーが一向に解決できません。
Uncaught TypeError: __webpack_require__(...).strat is not a function Uncaught TypeError: $(...).slick is not a function
該当のソースコード
__webpack_require__(/*! menber.js */ "./app/javascript/menber.js").strat(); // Uncomment to copy all static images under ../images to the output folder and reference [application.js] require("turbolinks").start() require("@rails/activestorage").start() require("channels") require('jquery') require('menber.js').strat() [menber.js] $(document).on('turbolinks:load',function(){ $('.slider').slick({ autoplay: true,//自動的に動き出すか。初期値はfalse。 autoplaySpeed: 3000,//次のスライドに切り替わる待ち時間 speed:1000,//スライドの動きのスピード。初期値は300。 infinite: true,//スライドをループさせるかどうか。初期値はtrue。 slidesToShow: 1,//スライドを画面に3枚見せる slidesToScroll: 1,//1回のスクロールで3枚の写真を移動して見せる arrows: true,//左右の矢印あり prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更 nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更 dots: true,//下部ドットナビゲーションの表示 pauseOnFocus: false,//フォーカスで一時停止を無効 pauseOnHover: false,//マウスホバーで一時停止を無効 pauseOnDotsHover: false,//ドットナビゲーションをマウスホバーで一時停止を無効 }); //スマホ用:スライダーをタッチしても止めずにスライドをさせたい場合 $('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){ $('.slider').slick('slickPlay'); }); }); [application.html.haml] !!! %html %head %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/ %title B.orlov fragment ollicail web site = csrf_meta_tags = csp_meta_tag = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' -# %script{src: "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"} = javascript_pack_tag 'application' = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' = stylesheet_link_tag "https://use.fontawesome.com/releases/v5.6.1/css/all.css" = stylesheet_link_tag "https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css", type: "text/css" %body %script{scr: "https://code.jquery.com/jquery-3.4.1.min.js"} %script{scr: "https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"} %script{scr: 'menber.js', type: 'text/javascript'} = yield [enviroment.js] const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.plugins.prepend('Provide', new webpack.ProvidePlugin({ $: 'jquery/src/jquery', jQuery: 'jquery/src/jquery' }) ) module.exports = environment
試したこと
webpackerに関しましては、導入からやり直しましたが解決できませんでした。
javascript導入の段階から間違っているのか、何がwebpackerでエラーを起こしているのか、恥ずかしながら全く検討もつきません。
スライダーの方は、初めはwindow.onloadを書いていたのですがturbolinksに合わせて記述を変更しました。
また、jqueryの読み込まれる順番が後になっているのかと思いapplication.html.hamlを修正しましたが、改善されませんでした。
補足情報(FW/ツールのバージョンなど)
ruby 2.6.5
yarn 1.22.5
node 14.9.0
あなたの回答
tips
プレビュー