前提
Rails5.2
エラー内容
SummernoteのWYSIWYGエディターを使って、写真投稿をする機能を実装しようとしたら、エディターのImageタブをクリックしても、画像挿入のウィンドウが表示されない(エディター)、という問題。
Google Chromeのデベロッパーツール(Shift+Command+c)でエラー内容を確認すると、以下のエラーが発生する。
Uncaught TypeError: t.modal is not a function
at Object.showDialog.........
at Object.<anonymous>........
色々ネットで調べると、このエラーメッセージは、
Uncaught TypeError: $(...).modal is not a function
直訳:「$(...).modalはfunctionではありません」
意訳:「.modal()なんて関数は存在しない」
っていう意味らしい。このエラーは、JavaScriptのエラーなので、railsとかrubyではなく、一番疑わしいのは、「自身のコード内に該当するJavaScriptの記述が存在するかどうか」らしい。
よくわからんけど、要は、JavaScriptが怪しいらしい!!!
とりあえず、自分のjsが記述されている、javascripts/application.jsを見に行く。
よ〜く見ると、jqueryが3つも記述されている。これが怪しいかも。。。
//= require jquery2
//= require jquery
//= require jquery_ujs
//= require jquery2 ← この子
//= require rails-ujs
//= require popper
//= require bootstrap
//= require bootstrap-sprockets
//= require jquery ← この子
//= require jquery_ujs ← この子
//= require_tree .
//= require toastr
//= require jquery-ui
//= require tag-it
//= require summernote/summernote-bs4.min
//= require summernote/lang/summernote-ja-JP
//= require summernote-init
//= require activestorage
// = require turbolinks
解決策
railsでのjqueryの記述の仕方について、原点に戻る。
【リンク】rails/jquery-rails
すると、記述方法に以下の通り記載されている。
Installation
If you are running Rails 5.1 and up, and if you have included //= require rails-ujs, then jquery_ujs is not needed anymore. You can just add:
//= require jquery
If you want to use jQuery 2, you can require jquery2 instead:
//= require jquery_ujs```
と記載されている。
つまり、次の2点によって、エラーが発生していた。
1. **Rails5.1以降は、rails-ujsがあれば、```//= require jquery_ujs```は不要**
2. **```//= require jquery2```使ってるなら、```//= require jquery```は不要**
よって、次の2つを削除して、
~~//= require jquery~~
~~//= require jquery_ujs~~
次の2つだけを残せばOKでした!!!
```assets/javascripts/application.js
//= require jquery2 ← キープ
//= require rails-ujs ← キープ
以上。