前提・実現したいこと
rails6でjqueryが動きません。
ユーザーページとゲストページで読み込むレイアウトファイルを変えているのですが、jqueryがうまく挙動しません。(guest.htmlとuser.html)
おそらく、applicaition.jsやguest.jsでの読み込み方が悪いと思います。
bootstrapは読み込めていて、デザインも反映されている状態ですが、jqueryがないのでアコーディオンなどが動かない状態です。
正しい読み込み方をご教授いただけますでしょうか?
合わせて解説を頂けると幸いでございます。
該当のソースコード
application.js
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. // nested_forms //= require jquery_nested_form import Rails from "@rails/ujs" import Turbolinks from "turbolinks" import * as ActiveStorage from "@rails/activestorage" import "channels" import "jquery" import "jquery_ujs" Rails.start() Turbolinks.start() ActiveStorage.start()
guest.js
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. //= require turbolinks //= require bootstrap //= require_tree ./guest
webpack/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
gemfile
gem 'bootsnap', '>= 1.4.4', require: false gem 'jquery-rails'
chromeコンソール
2:163 Uncaught ReferenceError: $ is not defined at 2:163 (anonymous) @ 2:163 DevTools failed to load source map: Could not load content for chrome-extension://binjlnaociakgkfkdahiipnpdnfonfen/copy-css-selector.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://binjlnaociakgkfkdahiipnpdnfonfen/content-script.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME DevTools failed to load source map: Could not load content for chrome-extension://eakacpaijcpapndcfffdgphdiccmpknp/scripts/content_page.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
試したこと
以下を参考に対応しましたが、こんがらがる一方で動かず...
https://www.sejuku.net/blog/57790
https://qiita.com/CoGee/items/edcf3db50406b97a59c7
補足情報(FW/ツールのバージョンなど)
各種バージョン
・ruby:2.7
・rails:6
実装にあたっての参考記事
https://www.sejuku.net/blog/57790
https://qiita.com/CoGee/items/edcf3db50406b97a59c7
あなたの回答
tips
プレビュー