[Rails6] jquery導入後に他のjsファイルが動かなくなってしまった。
Q&A
Closed
解決したいこと
Rails6での質問です。
初質問のため、質問フォームとして至らぬ部分があるかとは思いますが、どなたか回答いただければ幸いです。よろしくお願いいたします。
aplicaation.jsファイルにrequire("jquery")の記述をすると、他のJavaScriptファイルが動かなくなってしまういます。jqueryを導入しても他のjsファイルが動作する様にしたいです。
発生している問題・エラー
index.jsファイルがjqueryを導入すると動かなくなってしまう。
該当するソースコード
app/javascript/packs/aplication.js
require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("../comment")
require("../meal_comment")
require("../index")
require("../favorites")
config/webpack/enviroment.js
const { environment } = require('@rails/webpacker')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment
起動しなくなった該当ファイル
app/javascript/index.js
window.addEventListener('load', function(){
const pullDownButton = document.getElementById("lists")
const pullDownParents = document.getElementById("pull_down")
pullDownButton.addEventListener('click', function() {
if (pullDownParents.getAttribute("style") == "display:block;") {
pullDownParents.removeAttribute("style", "display:block;")
} else {
pullDownParents.setAttribute("style", "display:block;")
}
})
})
自分で試したこと
Gemfileにはgem 'jquery-rails'を記述しbundle installを行いました。
require("jquery")の記述と、config/webpack/enviroment.jsの記述を外すと通常通り起動します。
0