The logout function that was implemented from the beginning when webpacker was introduced to Rails 5.2 series stopped working due to no route matches [get] "/ logout" error.

Introduction

As soon as I introduced webpacker to Rails 5.2 while creating a posting application, the logout function that was originally implemented stopped working. no route matches [get] "/logout"I got an error and couldn't send the delete request, so I'll fix it.

environment

Ruby 2.6.5 Rails 5.2.4.2 webpacker 5.1.1

Error occurrence point

From the moment you load the webpacker script tag into application.html.slim after building the webpacker.

`ruby:app/views/layouts/application.html.slim`


head
    .
    .
    .
    - = javascript_include_tag 'application','data-turbolinks-track': 'reload'
    + = javascript_pack_tag 'application'
    .
    .
    .

solution

First, add `` `rails-ujs``` to the yarn package file. And make sure this is added to package.json.

$ yarn add rails-ujs

`package.json`


{
  "name": ,
  "dependencies": {
    "@rails/webpacker": "5.1.1", 
    "rails-ujs": "^5.2.4-3",
  },
}

2.app/javascript/packsディレクトリ配下にrails-ujs.jsファイルを作成し、下記の記述を追加します。

`app/javascript/packs/rails-ujs.js`


import Rails from 'rails-ujs';
Rails.start();

3.app/javascript/packs/application.jsファイルに、rails-ujs.jsファイルを読み込ませます。

`app/javascript/packs/application.js`


require("./rails-ujs.js");

4.app/views/layouts/application.html.slimファイルに、webpackerスクリプトを記述します。

`ruby:app/views/layouts/application.html.slim`


head
    .
    .
    .
    = javascript_pack_tag 'application'
    .
    .
    .

With the above, I think that you will receive a DELETE request.

Why does this work

As a result of various investigations, I can't affirm because I just combined Tsuji, but I made a prediction that it would be like this.

If you make a mistake, I would be very grateful if you could point it out!

First of all, as a premise, in the default state, HTML can only send GET, POST requests (so you can log in as usual)

However, when issuing RESTful APIs such as DELETE and PATCH in Rails, `gem rails-ujs``` or `gem jquery-rails``` is used because the processing is left to JavaScript. ..

In Rails 5.1 or later, this `rails-ujs is loaded by default in the JavaScript control file` (see the file below).

So we don't have to worry about it, just write options such as method:: delete on Rails side, and JavaScript will handle the rest, so you can send a DELETE request from HTML. I am.

By the way, support for jquery-ujs has been discontinued since Rails 5.1 (from Rails Guide.)

`app/assets/javascript/application.js`


//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

However, if you install webpacker, rails-ujs is not installed in the first place in the default state, so you can not receive support.

So I thought it was natural that RESTful API processing could not be used unless rails-ujs was installed and rails-ujs was newly loaded in the packs / application.js file.

reference

http://docs.komagata.org/5456 　https://www.inodev.jp/entry/2019/12/03/234210