Routing Error[No route matches [GET] “/logout”]エラーと格闘した話 #Rails

前提

-Rails 6.0.3.1
-ruby 2.6.3

railsでアプリを作成中にヘッダーにLogoutのリンクを作成していました。

動作確認で、ボタンを押してみると、
あらまあ....

No route matches [GET] “/logout”

お怒られました....
頼むから、ログアウトさせてくれ...
旅立たせてくれよ...

こうして長いRouting Error[No route matches [GET] “/logout”]エラーとの
戦いが始まるであろうとは、知る由もなかったのである。

やってみたこと

①ルーティングの確認

No route matchesって言ってるし、どうせルーティングミスってるんでしょ!!!
ほんまアホやなワイ。

ちゃんとlogout_path使ってるし、HTTP Verb🦆: POSTになってるやんな(汗)。

ルーティングはあってはるやん

②viewでメソッドの指定の確認

次いこ次。飲み足りんし、二軒目にきました。

<%= link_to “Log out”, logout_path, method: :post, class: “nav-link text-light”%>

へいらっしゃい!!!!!!!

と思いきや、お主も合ってはるな。
ちゃんと、postしていますな。

③検証ツールで確認

ほいなら、次は個室居酒屋で三軒目や。
HTML上で確認や。

a class=“nav-link text-light” rel=“nofollow” data-method=“post” href=“/logout”>Log out</a>

fuck　the po00ce!!!!!!!!!

マジかいな。まだ飲みたらんな!!!!!!!!!!!
data-method=“post
postさん、ちゃんといるんか............

④jQueryがきちんと動いているか確認する

Boys Be Engineer 非エンジニアよ、エンジニアになれ

このイカした記事で、jQueryに問題あるんちゃう？
っていう新たなる誘い。
四軒目に来ました。

Rails6でjQueryの導入方法
 Rails 6にjQueryとBootstrapを入れる
以上の記事で、rails6での導入方法をかたっぱしから試すロドリゲス。

撃沈ロドリゲス.................
ほなもう一軒行こうか......

⑤environment.jsの一部の記述を削除

/config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
environment.config.resolve.alias = {'vue$': 'vue/dist/vue.esm.js' }

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
module.exports = environment

今の設定。

それをこうしてこう!!!!（語彙力なし）

/config/webpack/environment.js

const { environment } = require('@rails/webpacker')
#2-7行目をコメントアウト
// const { VueLoaderPlugin } = require('vue-loader')
// const vue = require('./loaders/vue')

// environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
// environment.loaders.prepend('vue', vue)
// environment.config.resolve.alias = {'vue$': 'vue/dist/vue.esm.js' }
#ここまで

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
module.exports = environment

やっと旅立てる........
vue系のイケイケライブラリが邪魔してたらしい。
環境によっては、コメントアウトしなくても解決するっぽい。

**四軒目でわっしょい（jQueryがきちんと動いているか確認する）の記事しかなかったので、わっっしょいできなかった人は、コメントアウトしてみると行けるかもです。

五軒目にして、やっと旅立てる。
わっしょい!!!!!!