1

I am very new to Ruby and Ruby on Rails. Currently, I am using Ruby 3 and Rails 7. In my project, I want to add some javascript files required for Bulma CSS to work correctly. I learned how to do this with the help of import maps. But then I noticed that the link_to helper for delete throws a get request instead of delete. I figured out that somehow the turbo method is not working. Here are are the following files.

app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails";
import "controllers";
import "bulma_css_helper/navbar_toggler";
import "bulma_css_helper/notification_toggler";

config/importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin_all_from "app/javascript/bulma_css_helpers", under: "bulma_css_helpers"

delete button

<%= link_to tweet_path(tweet), data: { turbo_method: :delete, turbo_confirm: "Are you sure?" }, class: "has-text-danger" do %>
            <span class="icon">
              <i class="fa-solid fa-trash-can"></i>
            </span>
<% end %>

I tried to use button_to helper it works but does not send any confirm requests.

<%= button_to tweet_path(tweet), method: :delete, form: { data: { turbo_confirm: "Are you sure?" } }, class: "has-text-danger" do %>
            <span class="icon">
              <i class="fa-solid fa-trash-can"></i>
            </span>
<% end %>

Update: I also received an error in the console.

Uncaught TypeError: Failed to resolve module specifier "bulma_css_helper/navbar_toggler". Relative references must start with either "/", "./", or "../".

I would also like to point out that when I tried to log all the imports using ./bin/importmap json this is what I am getting.

{
  "imports": {
    "application": "/assets/application-92da2dacddd68d3c4d65944d44e99cc38a1b350ca0f2d2707314a20f8f021328.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-f309baafa3ae5ad6ccee3e7362118b87678d792db8e8ab466c4fa284dd3a4700.js",
    "@hotwired/stimulus": "/assets/stimulus.min-d03cf1dff41d6c5698ec2c5d6a501615a7a33754dbeef8d1edd31c928d17c652.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
    "rails-ujs": "https://ga.jspm.io/npm:rails-ujs@5.2.8-1/lib/assets/compiled/rails-ujs.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
  }
}

which clearly doesn't import any of the files within bulma_css_helper.

What should be the correct approach?

S_coderX451
  • 95
  • 1
  • 7
  • @Alex yes i did got some error in the console. – S_coderX451 Jun 16 '23 at 07:08
  • Yes, I fixed that typo. @Alex the directory name should be `bulma_css_helper` and I also updated the `importmap.rb` but the output of `./bin/importmap json` did not change. – S_coderX451 Jun 16 '23 at 10:30
  • i'm not really sure. can you try just adding a single file with `pin`. every time a had an issue with importmaps is because a had a typo somewhere. everyting i know about impormaps is in this answer: https://stackoverflow.com/a/72855705/207090. also, ditch `rails-ujs` it's obsolete, there is no need to learn it. – Alex Jun 18 '23 at 05:57
  • just to be clear if you have `app/javascript/bulma_css_helper` directory you should have `pin_all_from "app/javascript/bulma_css_helper", under: "bulma_css_helper"` and `import "bulma_css_helper/some_filename_in_this_directory"` – Alex Jun 18 '23 at 06:08
  • `import-maps` require a bit more handholding. maybe try it with `esbuild` it's a bit easier and a bit more of a standard approach to handling javascript just run `rails new hello_bulma -c bulma` and then `bin/dev` https://github.com/rails/cssbundling-rails, https://github.com/rails/jsbundling-rails – Alex Jun 18 '23 at 06:13
  • Have you fixed your folder names typo? To be consistent, just rename your folder to `bulma_css_helpers` and change everywhere in the code to use `bulma_css_helpers`. Make sure also you have the file `navbar_toggler.js` in your folder `app/javascript/bulma_css_helpers/`. – Shah Nawas Khan Jun 20 '23 at 05:37
  • @ShahNawasKhan Yes I did but it doesn't seem to work either. – S_coderX451 Jun 20 '23 at 11:49

0 Answers0