再読み込みしないといいねが反映されない

Question

前提・実現したいこと

現在、Rails6でインスタクローンアプリを作成しています。
今はいいね機能の実装中です。

以下のページを参考に、いいねボタンを押すとページの再読み込みなしで
１　いいねボタンの色が変わり
２　いいね数が１増える
描画をしたいと考えています。

発生している問題・エラーメッセージ

画面上エラーメッセージは表示されませんが、googleのデベロッパーツールを見ると以下のエラーが表示されていました。

１つ目

Uncaught Error: Cannot find module 'bootstrap'
  at webpackMissingModule (application.js:10)
  at Object../app/javascript/packs/application.js(application.js:10)
  at _webpack_require_(bootstrap:19)
  at bootstrap:83
  at bootstrap:83

２つ目

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) 

該当のソースコード

_like.html.erb

<% if !current_user?(micropost.user) %>
    <span class="like">
    <% if micropost.make_like?(current_user) %>
      <%= form_for(micropost.likes.find_by(user_id: current_user.id), method: :delete, remote: true) do |f| %>
        <%= button_tag(class: "btn btn-default btn-xs") do %>
          <i class="fas fa-heart unlike-btn"></i>
          <%= content_tag :span, "#{micropost.likes_count}" %>
        <% end %>
      <% end %>
    <% else %>
      <%= form_for(micropost.likes.build, remote: true) do |f| %>
        <div><%= hidden_field_tag :micropost_id, micropost.id %></div>
        <%= button_tag(class: "btn btn-default btn-xs") do %>
          <i class="far fa-heart like-btn" ></i>
          <%= content_tag :span, "#{micropost.likes_count}" %>
        <% end %>
      <% end %>
    <% end %>
  </span>
<% end %>

_micropost.html.erb

<li id="micropost-<%= micropost.id %>" data-micropost-id="<%= micropost.id %>">
  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
  <%= link_to micropost.user.name, micropost.user %>
  <span class="content">
    <%= micropost.content %>
    <%= image_tag micropost.picture.url if micropost.picture? %>
  </span>
  <%= render 'likes/like', micropost: micropost %>
  <span class="timestamp">
    <%= time_ago_in_words(micropost.created_at) %>前に投稿
    <% if current_user?(micropost.user) %>
      <%= link_to "削除", micropost, method: :delete, data: { confirm: "削除してもよろしいですか？" } %>
    <% end %>
  </span>
</li>

likes_controller.rb

class LikesController < ApplicationController
  before_action :logged_in_user

  def create
    @micropost = Micropost.find(params[:micropost_id])
    unless @micropost.make_like?(current_user)
      @micropost.make_like(current_user)
      @micropost.reload
      respond_to do |format|
        format.html { redirect_to request.referrer || root_url }
        format.js
      end
    end
  end

  def destroy
    @micropost = Like.find(params[:id]).micropost
    if @micropost.make_like?(current_user)
      @micropost.remove_like(current_user)
      @micropost.reload
      respond_to do |format|
        format.html { redirect_to request.referrer || root_url }
        format.js
      end
    end
  end
end

micropost.rb

class Micropost < ApplicationRecord
  belongs_to :user
  has_many :likes, dependent: :destroy
  has_many :make_like_users, through: :likes, source: :user
  default_scope -> { order(created_at: :desc) }
  mount_uploader :picture, PictureUploader
  validates :user_id, presence: true
  validates :content, presence: true, length: { maximum: 200 }
  validates :picture, presence: true
  validate  :picture_size

  def make_like(user)
    likes.create(user_id: user.id)
  end

  def remove_like(user)
    likes.find_by(user_id: user.id).destroy
  end

  def make_like?(user)
    make_like_users.include?(user)
  end

  private

    def picture_size
      if picture.size > 5.megabytes
        errors.add(:picture, "画像サイズを5MB以下にしてください")
      end
    end
end

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.3'
gem 'rails', '~> 6.0.2', '>= 6.0.2.1'
gem 'bcrypt'
gem 'faker'
gem 'carrierwave'
gem 'mini_magick'
gem 'will_paginate'
gem 'bootstrap-will_paginate'
gem 'puma', '~> 4.1'
gem 'bootstrap-sass'
gem 'sass-rails', '>= 6'
gem 'bootstrap'
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'webpacker', '~> 4.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.7'
gem 'bootsnap', '>= 1.4.2', require: false
gem 'rails-i18n'
gem 'font-awesome-sass'
gem 'counter_culture'

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'rspec-rails'
  gem 'sqlite3', '~> 1.4', require: false
  gem 'factory_bot_rails'
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :production do
  gem 'pg'
  gem 'fog'
end

routes.rb

Rails.application.routes.draw do
  get 'likes/create'
  get 'likes/destroy'
  get 'sessions/new'
  root 'main_page#main'
  get '/signup', to: 'users#new'
  get '/login', to: 'sessions#new'
  post '/login', to: 'sessions#create'
  delete '/logout', to: 'sessions#destroy'
  get '/newpost', to: 'microposts#new'
  resources :users do
    member do
      get :following, :followers
    end
  end
  resources :microposts, only: [:create, :destroy]
  resources :relationships, only: [:create, :destroy]
  resources :testsessions, only: :create
  resources :likes, only: [:create, :destroy]
end

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("bootstrap")
require("@fortawesome/fontawesome-free")

試したこと

以下のサイトの方法を参考に対応しましたが、効果は見られませんでした。
https://teratail.com/questions/207172
https://blog.piyo.tech/posts/2018-08-11-gem-with-js-on-webpacker/

補足情報（FW/ツールのバージョンなど）

関係ありそうなものを抜粋いたします。
Rails 6.0.2.1
bootstrap (4.4.1)
bootstrap-sass (3.4.1)
turbolinks (5.2.1)
turbolinks-source (5.2.0)
webpacker (4.2.2)

ご回答のほどどうぞよろしくお願いいたします。

Answer 1

非同期処理での解決が難しいと考えたため、妥協案として同期処理をすることにいたしました。
ご回答いただいた皆様、ありがとうございました。

Answer 2

$ is not definedはjQueryが読み込まれていない又は
window.$にjqueryモジュールが割り当てられていない時に出ますので
jQueryがちゃんと読まれているか確認してみて下さい。

Answer 3

以下を試されましたか?

1. application.jsにJQuery追加。

・・・
require('jquery')
require("bootstrap")
require("@fortawesome/fontawesome-free")

2.config/webpack/envioroment.jsに以下追加。

const {environment} = require('@rails/webpacker')

environment.splitChunks()

// JQuery用 ここから
const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
  }),
);
// ここまで

module.exports = environment

Comments

[mongolia]

それと、turbolinksを使っている場合は、JQueryも書き方を変える必要があるとのこと。
$(function(){
//なにかしらの処理
});
上記は以下のように書く。
$(document).on('turbolinks:load', function() {
//なにかしらの処理
});

[退会済みユーザー]

mongolia様
回答ありがとうございました。
上記の件を試したところ、
ActionController::InvalidAuthenticityToken in LikesController#create
というエラーが出ました。
こちらについては自力でもう少し調べてみます。

[mongolia]

既に解決されているかもですが、そちら、Ajax通信するときによく出るやつです。
送信するdataに、以下の項目を追加することで回避できるとおもいます。
authenticity_token: $('meta[name="csrf-token"]').attr('content')}

[退会済みユーザー]

mongolia様

create.js.erb
'''
$(document).on('turbolinks:load', function() {
$("#micropost-<%= @micropost.id %>.like").html("<%= j(render "likes/like", micropost: @micropost) %>");
});
'''

destroy.js.erb
'''
$(document).on('turbolinks:load', function() {
$("#micropost-<%= @micropost.id %>.like").html("<%= j(render "likes/like", micropost: @micropost) %>");
});
'''

上記のように修正いたしましたが、エラーの内容に変化は見られませんでした。
解決方法を模索中ですが、他に可能性のある原因はありますでしょうか。

[mongolia]

上記をjs.erbファイルではなく、html.erbに書いたら動きますか?

webpackerだとcreate.js.erbのような中身だと動かないかもと思いました。
理由は、webpacker使うと静的ファイルが生成されるからです。
そのため、サーバーサイドから動的な値を送信(<%= @micropost.id %>のように)はできないと考えます。
対策としてはgonというgemを使うなどです。
[https://qiita.com/jiko797torayo/items/f8962bec2eefbf0aacd9(https://qiita.com/jiko797torayo/items/f8962bec2eefbf0aacd9)

ちなみにエラーは以下ですかね?
>ActionController::InvalidAuthenticityToken in LikesController#create
その場合は、以下の可能性もあります。
そちら、Ajax通信するときによく出るやつです。
送信するdataに、以下の項目を追加することで回避できるとおもいます。
authenticity_token: $('meta[name="csrf-token"]').attr('content')}
https://qiita.com/r_ishimori/items/4f8db624e39d9e5ba459

[退会済みユーザー]

mongolia様

度々丁寧なご回答ありがとうございます。
現在
ActionController::InvalidAuthenticityToken in LikesController#create
が出てきます。

加えてお伺いしたいのですが、
authenticity_token: $('meta[name="csrf-token"]').attr('content')}
を挿入した後の記述は以下で合っておりますでしょうか？

$(document).on('turbolinks:load', function() {
authenticity_token: $('meta[name="csrf-token"]').attr('content')}
$("#micropost-<%= @micropost.id %>.like").html("<%= j(render "likes/like", micropost: @micropost) %>");
});

Answer 4

BootstrapはjQuery必須のフレームワークだったと思います。
２つ目のエラーはjQuery本体の読み込みがなくjQueryの記法を使おうとしたときに見られることが多いです。
１つ目はjQuery本体の読み込みがないことによりBootstrapが正しく動いていないのかなと。
確実にjQuery本体を読み込ませてください。