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:
There are no errors in the console:
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!
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.