Rails 6: link to destroy_user_session_path using GET instead of DELETE

user_1741325 0
Viewed 703

I have just started a simple Rails 6.0.3.1 project.

I'm setting up the Devise actions, but the logout link doesn't seem to work. It's performing a GET request instead of a DELETE despite the fact that I specify the method:

- if user_signed_in?
  = link_to 'Logout',
    destroy_user_session_path,
    class: 'button is-light',
    method: :delete

Clicking the link yields:

Rails error message showing the GET request

There are no errors in the console:

no console errors on click

My app/javascript/packs/application.js looks like this:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

So Rails ujs should be intercepting the link click and performing a DELETE, but it's not.

My config/webpack/environment.js looks like this:

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)
module.exports = environment

I tried searching for a solution on other SO threads but I didn't find something that works. Some people suggested using a button instead of a link, but I want a link not a button.

The issue occurred after I installed Bulma CSS framework via yarn:

yarn add bulma

which I then imported into my project in app/javascript/packs/application.scss with:

@import '~bulma';

My layout file (application.html.erb) includes the lines:

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application' %>

I've created a simple dummy app to reproduce the problem.

Any advice on what I might be doing incorrectly here?

Thanks in advance!

rails-ujs webpacker ruby-on-rails
2 Answers

I ultimately found the solution.

I created the file app/javascript/stylesheets/application.scss where I put the line:

@import '~bulma';

Then, in app/javascript/stylesheets/application.js I added the line:

import 'stylesheets/application'

It seems that webpacker requires the application.js file to import the appropriate CSS files in order to work.

user_17413250

Can you add your html source in the question?

Also, you can try this instead:

- if user_signed_in?
  = link_to 'Logout',
    destroy_user_session_path,
    class: 'button is-light',
    data: {method: :delete}

notice the part: data: {method: :delete}

user_53390890
Related