Railsのlink_toでdeleteメソッドが動作しなくなった

Railsアプリ開発中に発生して、色々調べて解決したのでまとめました（今回は初歩的なスペルミスでした）。

問題：bootstrapを導入したらlink_toのdeleteメソッドが機能しなくなった
原因：application.jsファイルに記述するコードのスペルミス

学んだこと：サーバーを起動してデベロッパーツールでエラーが生じていないか確認すること

環境

ruby 2.7.3
rails 6.1.4.1
bootstrap 5.1

背景

1. デザインを整える前にCRUD処理を実装済み
2. 新規登録、編集、詳細表示、削除が機能することは確認済み
3. デザインを整えるためにbootstrap5.1, popper.js, FontAwesomeをインストール
4. 動作を確認すると削除が機能しない（具体的には一覧画面や編集画面で削除を押すと詳細画面に飛んでしまう）
5. ここまでにやったことはbootstrapを使用できるようにimportへの記述・stylesheetsのapplication.cssをscssに変更したぐらい

現象の確認

bootstrap導入のブランチを切る前、元のdevelopブランチでCRUDが機能することは再確認した。ここはやはり問題ない。

そしてbootstrapを導入したことで機能しなくなった問題のコードは下記。

○○.html.erb

<%= 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

スペルミスしてる・・・

application.js

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の動作説明したら感動された話

【Rails】 button_toの使い方をどこよりもわかりやすく解説！