Railsアプリ開発中に発生して、色々調べて解決したのでまとめました（今回は初歩的なスペルミスでした）。
問題：bootstrapを導入したらlink_toのdeleteメソッドが機能しなくなった
原因：application.jsファイルに記述するコードのスペルミス
学んだこと：サーバーを起動してデベロッパーツールでエラーが生じていないか確認すること
環境
ruby 2.7.3
rails 6.1.4.1
bootstrap 5.1
背景
- デザインを整える前にCRUD処理を実装済み
- 新規登録、編集、詳細表示、削除が機能することは確認済み
- デザインを整えるためにbootstrap5.1, popper.js, FontAwesomeをインストール
- 動作を確認すると削除が機能しない（具体的には一覧画面や編集画面で
削除を押すと詳細画面に飛んでしまう） - ここまでにやったことは
bootstrapを使用できるようにimportへの記述・stylesheetsのapplication.cssをscssに変更したぐらい
現象の確認
bootstrap導入のブランチを切る前、元のdevelopブランチでCRUDが機能することは再確認した。ここはやはり問題ない。
そしてbootstrapを導入したことで機能しなくなった問題のコードは下記。
<%= link_to "削除", word, method: :delete, data: { confirm: "削除しますか？"} %>
ターミナルのログを確認すると削除ボタンを押した時に、GETメソッドが動作していた。しかし、deleteメソッドが正常に動作している時も呼び出されているのはGETメソッドであるため、これは本質ではないと考える。
詳細画面に飛ぶということは、link_toでpath(ここではword)が呼び出された後のmethod: :delete以降が認識されていないと考える。
色々調べた結果、link_toをbutton_toに変更すると動作した。しかしこの場合、confirmが作動せず「削除しますか？」の問いかけなしに削除されてしまった。
問題の解決
サーバーを起動してデベロッパーツールで確認したところ、コンソールで下記のエラーが発生していた。
Uncaught Error: Cannot find module 'bootsstrap/dist/js/bootstrap'
at webpackMissingModule (application.js:1)
at Module../app/javascript/packs/application.js (application.js:1)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
スペルミスしてる・・・
import 'bootsstrap/dist/js/bootstrap'
import '@fontawesome/fontawesome-free/js/all'
一行目の部分でbootstrapとするべき部分をbootsstrapとスペルミスしていた。ここを修正したら、問題なく動作した。
ちなみにFontAwesomeもスペルミスをしていて、@fortawesomeとするべき部分を@fontawesomeとしていた。
学んだこと
普段Railsのルーティングやメソッドでエラーがある場合は、それに対応したエラー画面が出力されるため気付くが、今回のエラーはRailsの問題ではなくJavaScriptの問題であるため、エラー画面が出力されずすぐに気付けなかった。
これからはサーバーを起動してデベロッパーツールでもエラーが発生していないか確認しようと思う。
ちなみに上記のような単純なスペルミスではない場合、下記に記載した記事が参考になるかもしれません。
参考
【Ruby on rails】data-confirm で動かないdeleteメソッドが動作しない
Railsでlink_to deleteメソッドが動かない
Rails学習者にrails-ujsの動作説明したら感動された話