Uncaught ReferenceError: $ is not defined　が解消できない

大変お世話になっております。

こちらのページを参照しながら現在「いいね」機能を実装している最中です。
[Rails]いいね機能の非同期での実装!!!

機能そのものは実装できたのですが、非同期通信が上手くできておりません。

色々調べた所、jqueryが読み込まれていないのではないか？というところまではたどり着けたのですが、そこから先が解決できません。

なお以下の手順でjqueryをインストールしております。

gemfileに

gem 'jquery-rails'

を追記

bundle installを実行

application.jsに以下を追記

//= require jquery3
//= require rails-ujs
//= require_tree .

ローカルサーバーの再起動

以上です。

いいねボタンを押したときの検証ツールでは下記のエラーが起きております。

VM251:1 Uncaught ReferenceError: $ is not defined
at <anonymous>:1:1
at processResponse (rails-ujs.js:283)
at rails-ujs.js:196
at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)

どなたかお力を貸して頂ければ幸いです。

以下コードです。

いいねボタンを実装するインデックスファイル

【index.html】

〜
<%= render partial: 'likes/like', locals: { nutrition: nutrition} %>
〜

【views/likes/_like.html.erb】

<div class="like-link" id="like-link-<%= nutrition.id %>">
  <% if current_user.likes.find_by(nutrition_id: nutrition.id) %>
    <%= link_to unlike_path(nutrition.id), method: :delete, remote: true do %>
        <div class = "iine__button">❤️<%= nutrition.likes.count %></div>
    <% end %>
  <% else %>
    <%= link_to like_path(nutrition.id), method: :post, remote: true do %>
        <div class = "iine__button">♡️<%= nutrition.likes.count %></div>
    <% end %>
  <% end %>
</div>

【views/likes/like.js.erb】

$("<%= @id_name %>").html("<%= j(render partial: 'likes/like', locals: {nutrition: @nutrition}) %>");

【views/likes/unlike.js.erb】

$("<%= @id_name %>").html("<%= j(render partial: 'likes/like', locals: {nutrition: @nutrition}) %>");

【app/javascript/packs/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.

//= require jquery
//= require rails-ujs
//= require turbolinks
//= require_tree .

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../delete")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

ご指導頂ければ幸いです。

m.ts10806

2020/11/20 10:55

調べたら出てくるエラーですが、結局、jQuery読み込めてないだけでは。ちなみにjQueryのバージョンは何でしょうか。

tarotarotarotar

2020/11/20 11:09 編集

ありがとうございます！コンドールにて console.log($.fn.jquery);や $(function() { console.log($.fn.jquery); }); を打ち込んで確認しようとしたのですが、 VM65:1 Uncaught TypeError: Cannot read property 'jquery' of undefined at <anonymous>:1:6 と出てしまい、確認できません。これは上手くインストールできていないということでしょうか？

m.ts10806

2020/11/20 11:10

提示の記事は「jQueryの導入が終わっている前提」ですし、まずは正しく導入するところからでしょうか。そこまでの手順を具体的に提示されたほうが良いかと思います。

tarotarotarotar

2020/11/20 11:15

ありがとうございます。編集させていただきました。

m.ts10806

2020/11/20 11:16 編集

あと、ブラウザで「ソースを表示」したときにどういう順番でjsファイルが読み込まれていますか？確認してください。

tarotarotarotar

2020/11/20 11:23

ありがとうございます。 <div class="like-link" id="like-link-57"> <a data-remote="true" rel="nofollow" data-method="post" href="/like/57"> <div class = "iine__button">♡️1</div> </a></div> 該当の箇所はこのような表示でした・・・

m.ts10806

2020/11/20 11:30

いえそこではなく、 <head>内のjsファイルの読み込み部分です。読み込み順番が違っていればjQueryを読み込んでいてもjQueryの機能は使えません。

tarotarotarotar

2020/11/20 11:32

お手数おかけして申し訳ございません。 <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="vsSQAWT9HTiAZjUahdw9GH2QorPfK0D6z00fZNrD83eqHvBRTutxXFdE+kc7RJesBNz99fH4cBd8A9taXJGdZw==" /> <link rel="stylesheet" media="all" href="/assets/favorites.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/likes.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/nutritions.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/style.self-b71cab79e6fa61745fc9451dc643974658f86bb3449c49efc41ff7c4ef67802c.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/users.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" /> <script src="/packs/js/application-df111dfe56da410045d1.js" data-turbolinks-track="reload"></script> 最後の行が該当の箇所でしょうか？

m.ts10806

2020/11/20 11:33

あぁそうか、application.js内にまとめられてるのか。

行動規範の内容に同意します

回答3件

https://stackoverflow.com/questions/62946298

SOの受け売りですけど、
application.jsに以下の2行を追記すると改善するかも…。

javascript
1window.jQuery = $;
2window.$ = $;

投稿2020/11/20 16:09

gpsoft

総合スコア1323

tarotarotarotar

2020/11/21 01:44

ありがとうございます！ application.jsの先頭に入れたら変化が起こりました！いいねボタンを押すと、 Routing Error No route matches [GET] "/like/38" というエラーが出るようになりました。これはエラーが出るものの一応は動作しているということでしょうか？