Rails 今日のエラー
はじめに
ポートフォリオ作成中のプログラミング初学者です🔰
これは完全に自分が悪いのですが、エラーにハマってしまったので記録を残しておきます🥲
実行環境
（現在）
ruby 3.1.2p20
Rails 6.1.7.3
（アプリケーション作成時）
ruby 3.1.2p20
Rails 7
細かいバージョンはなんだったか消えてしまいましたが作成時は7でした🥲
エラー
deviseで諸々設定済み。
ログインと新規登録は問題なく出来る状態。ログアウトを押すとエラーになる、、
ログアウトのlinkの記述👇
<li class="nav-item">
<%= link_to destroy_end_user_session_path, method: :delete , class: "nav-link" do %>
<i class="fa-solid fa-right-from-bracket"></i>
ログアウト
<% end %>
ボタンを押してログアウトさせたいが、メソッドがなぜかGETになってしまってRoutingErrorになる。method: :deleteをきちんと指定しているのになぜか？？
原因
link_toでmethodがdeleteにならないで検索すると、
rails7ではTurboがデフォルトになり、それと同時にrails-ujsはデフォルトから外れて非推奨になったとのこと。
記述法も変わっているらしい。
<%# rails-ujsの場合 %>
<%= link_to '削除', cat, method: :delete %>
<%# Turboの場合 %>
<%= link_to '削除', cat, data: { turbo_method: :delete } %>
わたしはアプリケーションを作る時にrailsのバージョンを7で入れてしまっており、
その後バージョン6に変えていたのでもしやそれが原因か？と思い直しましたが変わらず、、
他にもrailsを全部消してinstallしなおしたり、
gemやnode_moduleを消して再installしたりしましたが治らず、、
バージョン6で最初から作り直そうか悩みましたが、
結局メンターさん二人係で解決できた最終的な要因が下記になります！
application.jsの中のこの記述
import "channels";
〜この記述の解説〜
import "channels";によってActionCableの設定が含まれるchannelsモジュールが、Webpackによって読み込まれ、その結果、ブラウザ側でActionCableを使用するための設定が行われます。
Railsでは、WebSocket通信のためにActionCableが使われています。
ActionCableは簡単にいうとリアルタイム通信機能。
"channels"という概念を使用して、サーバーとクライアント間の接続を管理します。
例）リアルタイムで更新されるチャット機能を実装することができる！
Rails7ではwebpackerは廃止されたようです。
JavaScriptのデフォルトのパッケージマネージャがWebpackからimportmapに変更されています。
"channels"をインポートするための新しいコードは以下の記述みたいです。
import "@rails/actioncable";
上記の記述に変えたらエラーが消えました！
import "channels";自体は、ルーティングエラーとは直接関係ありませんが、
これが正しく動作していないと、link_toヘルパーでmethod: :deleteと指定したにもかかわらず、ブラウザはGETリクエストを送信してしまうことがあるらしい。
少し複雑でうまくまとめらていないのですが、関係性はこのような感じです。
他にもCSSが読み込めないみたいなエラーが出ていたのですが、
単純にjavascript/stylesheetsフォルダのスペルミスでした🥲
さいごに
必要のない記述も、残っていると良きせぬエラーが出てきたりしますね。
バージョンをダウングレードしてしまっているので、また何かしら出てきそうで怖いですが、今日改めてコンソールとターミナルをしっかり読む大切さを学んだのでなんとか乗り切ろうと思います🏋🏻
バージョンによってこんなに変わってるのか、という勉強にもなったので結果オーライとしましょう😂このエラーでだいぶ時間溶けてしまったので焦ってますが、明日も気を抜かず頑張ります🔥
参考にさせていただいた記事🌱
Discussion