モーダル画面でエラー Uncaught TypeError: $(...).modal is not a function が出てしまう

Question

前提・実現したいこと

rails6 にてモーダル画面から記録を登録する画面を作っています。
「記入する」ボタンを押すとモーダル画面が表示され、記録をつけることができ、保存・更新されるとモーダルが閉じる仕様を実現したいです。

しかし、コンソールにて以下のようなエラーが表示され、記録自体はできますがモーダルを閉じることができません。
Uncaught TypeError: $(...).modal is not a function

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

Uncaught TypeError: $(...).modal is not a function
    at <anonymous>:2:19
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)

起きている問題

• モーダルを開くとエラー文表示される（この時の見た目の不具合はなく、、モーダル自体は普通に表示されます。）
• 記録をつけて保存しようとすると、モーダルが閉じない。（記録はできている）

該当のソースコード

以下、モーダルリンクが設置してある共通画面（抜粋）と、モーダル画面の中身（form）です。どちらもAjaxに対応するために remote: trueを設置しています。

<nav class="nav-menu d-none d-lg-block">
  <ul>
    <li class="get-recorded">
      <%= link_to "記入する", new_record_path, remote: true, id: "record-modal", data: {toggle: "modal", target: "#recordModal"} %>
    </li>
    <li><%# メニュー省略　%></li>
    <li><%# メニュー省略　%></li>
  </ul>
</nav><!-- .nav-menu -->
<%# 中略　%>
<div class="modal" id="recordModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>

<!-- Modal -->
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <%= form_for @record, remote: true do |f| %>
        <% if @record.errors.any? %>
        　　<%# エラーある場合ここに表示（省略）　%>
        <% end %>
        <div class="form-group">
          <%= f.label :date, for: "inputDate" %>
          <%= f.date_field :date, class: "form-control", id: "inputDate", value: @record.date %>
        </div>
        <p class="rcd-lbl">朝：</p>
        <div class="form-row">
          <div class="form-group col-md-4">
            <%= f.label :m_sbp, for: "inputM_SBP", class: "sr-only" %>
            <%= f.telephone_field :m_sbp, placeholder: "最高血圧", class: "form-control", id: "inputM_SBP", value: @record.m_sbp %>
          </div>
          <%# 以下フォーム省略　%>
        </div> 
        <div class="form-group">
          <%= f.submit "記録する", class: "btn btn-block btn-blue", id: "record-btn" %>
        </div>
      <% end %>
    </div>
  </div>

以下、コントローラーです。新規も編集も同じモーダル画面から入力できるようになっていて、今日の日付の記録がない場合は新規登録、ある場合はフォームに記録が表示され編集・更新できる仕様になっています。save, update 自体はできていますが、noticeやエラー文は表示されません。

# app/controllers/records_controller.rb

def new
  @user = current_user
  default_day = Time.now
  if @user.records.exists?(date: default_day)
    @record = @user.records.find_by(date: default_day)
  else
    flash.now[:danger] = 'errored!'
    @record = Record.new(date: default_day)
  end
end

def create
  @record = Record.new(record_params)
  respond_to do |format|
    if @record.save
      format.html{ redirect_to root_url, notice: 'Record was successfully created.'}
      format.js
    else
      format.html{ render :new, record: @record}
      format.json{ render json: @record.errors, status: :unprocessable_entity}
    end
  end
end

def update
    @user = current_user
    @record = @user.records.find_by(date: params[:record][:date])
    respond_to do |format|
      if @record.update_attributes(record_params)
        format.html { redirect_to root_url, notice: 'Record was successfully updated.' }
        format.js
      else
        format.html { render :new, record: @record }
        format.json { render json: @record.errors, status: :unprocessable_entity }
        format.js
      end
    end
  end

以下、モーダルの開閉画面のjsです。開くけれどエラー文が表示されます。また、閉じるほうは反応しません。（後述にある設定変更をすると閉じるようになります。）

<%# app/views/records/new.js.erb %>

$("#recordModal").html("<%= escape_javascript(render 'form', record: @record) %>")
$("#recordModal").modal("show")

<%# app/views/records/create.js.erb %>
<%# app/views/records/update.js.erb %>

$("#recordModal").modal("hide");

以下、bootstrap, jquery を使用するために設定している内容です。rails6を利用しているため、webpackerで入れました。

# app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
# このアプリ用に入れたjs
require("chartkick")
require("chart.js")
# import
import 'bootstrap';
import '../stylesheets/application';

# config/webpack/environment.js

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

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)

試したこと

こちらの記事を参考に、jsの読み込みを設定変更するとエラーは消えます。
(application.js と environment.js の変更)
https://stackoverflow.com/questions/58371711/bootstrap-hide-modal-not-working-in-rails-6-using-ajax
記録が保存・更新されモーダルが閉じるようになりますが、
設定してある notice や エラーの render は無視されてしまいます。
他にも記事を読む限り、javascriptの読み込みが影響しているのではないかと思うのですが、経験値が少なくここまでしか分かりませんでした。

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

ruby '2.6.5'
rails '6.0.2'

どなたかお知恵のある方ご助言いただけると嬉しいです。

Answer 1

jQueryの設定やその他のコードが問題ないとするとjQueryの書き方の問題かと思います。

$("#recordModal").modal("show");→$("#recordModal").show();

$("#recordModal").modal("hide");→$("#recordModal").hide();

※セレクタ(#recordModal)は修正が必要かもしれません。

---

show: http://semooh.jp/jquery/api/effects/show/_/

hide: http://semooh.jp/jquery/api/effects/hide/_/

Comments

[mikannOishiii]

コメントありがとうございます！
jQuery の書き方を修正したら、エラーを消すことができました。

ただ、エラーは消えたもののモーダルが閉じたあとも背景がモーダル画面の背景のままの状態になり、どこのボタンも押すことができなくなってしまいました。
それについては、下記のように jQuery を追加することで対応できました。

```
<%# app/views/records/create.js.erb %>
<%# app/views/records/update.js.erb %>

$("#recordModal").hide();
$("body").removeClass("modal-open");
$(".modal-backdrop").remove();
```

また、エラーが正しく表示されなかったのは別問題（コントローラーで正しく値を渡せていなかったから）でした。下記のように修正することで無事実装できました。
```
def update
@user = current_user
@record = @user.records.find_by(date: params[:record][:date])
respond_to do |format|
if @record.update_attributes(record_params)
format.html { redirect_to root_url, notice: "Record was successfully updated" }
format.json { render :show, status: :created, location: @record }
else
format.js { render :new }
format.json { render json: @record.errors, status: :unprocessable_entity }
end
end
end
```続きを読む ∨

[no1knows]

それは良かったです！
複数のエラーがあると切り分けが難しいですよね・・