Links with method DELETE triggering a GET

[DaniG2k]

Steps to reproduce

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:

= link_to 'Logout', destroy_user_session_path, method: :delete

Clicking the link yields:

As far as I can tell, Rails ujs should be intercepting that and triggering a DELETE. My app/javascript/packs/application.js is including ujs:

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

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

I've worked on plenty of other Rails projects in the past and have never had a problem using method: :delete on a link, so I'm wondering if there's an issue with ujs or if it's a configuration error on my part. As far as I can tell I have a vanilla setup so I don't see why it would fail.

Expected behavior

Clicking the link with method: :delete should trigger a DELETE controller request.

Actual behavior

Link triggers GET request to controller.

System configuration

Rails version: 6.0.3.1
Ruby version: 2.7.1

[jonathanhefner]

This sounds like a configuration issue. Are there any error messages in the JavaScript console before you click the link?

[DaniG2k]

@jonathanhefner nothing:

Again, this is a vanilla Rails project that I just started with:

rails new myproject --database=postgresql --webpack=vue

All config is default.

[vipulnsward]

Can you share a sample application repo on GitHub with steps you are following after rails new myproject --database=postgresql --webpack=vue.
Will be easier to debug what's wrong.

[DaniG2k]

Sure thing: https://github.com/DaniG2k/myproject

I think I've found the culprit (but not yet the solution).
When I start a new project with just Devise, the logout button (with method: :delete) works fine.

When I add the Bulma CSS framework, the logout link stops working.

I installed Bulma as follows:

yarn add bulma

then in app/javascript/packs/application.scss I put:

@import '~bulma'

The Bulma framework loads but the method: :destroy links stop working...
I'm guessing the issue lies somewhere with webpacker/ujs but I can't figure out exactly what the problem is.

[vipulnsward]

The application.scss file in packs directory is causing the issue, see usage here: https://github.com/rails/webpacker#usage
https://github.com/rails/webpacker/blob/master/docs/css.md

[pglombardo]

The css.md link is now: https://github.com/rails/webpacker/blob/5-x-stable/docs/css.md

I had this issue but couldn't find any problem with the application.scss.

In the end, installing jquery-ujs directly was the fix for my application.

[Entotam]

The css.md link is now: https://github.com/rails/webpacker/blob/5-x-stable/docs/css.md

I had this issue but couldn't find any problem with the application.scss.

In the end, installing jquery-ujs directly was the fix for my application.

Thank you, it helps me