link_toだとうまくうまく削除ボタンが動作しないため、どうかご教示ください

Question

前提・実現したいこと

現在「現場で使えるRuby on Rails5」を使ってRailsを勉強しており、そこでTodoリストを作成しております。
そこで、削除ボタンを作成してところでうまく削除ボタンを動作しません。
削除ボタン押すと、削除ではなく、参照してしまいます。
なのでうまく削除ボタンが動作するようにしたいです。

発生している問題・エラーメッセージ

link_toを使うとうまく削除ボタンが動作せず、showアクションを読み込んでします。。
button_toを使うとうまく削除ボタンが動作します。しかし、アラートは表示されません。
しっかりとmethod: :deleteもつけておりますし、destroyアクションも間違ってないと思います。
エラー等は起きておりません。

該当のソースコード

index.html.slim

h1 タスク一覧

= link_to  "新規登録", new_task_path, class: 'btn btn-primary' 

.mb-3 
table.table.table-hover   
  thead.thead-default 
    tr 
      th = Task.human_attribute_name(:name)
      th = Task.human_attribute_name(:created_at)
      th 
  tbody 
    - @tasks.each do |task|
      tr 
        td = link_to task.name, task_path(task) 
        td = task.created_at
        td 
          = link_to  "編集", edit_task_path(task), class: 'btn btn-primary mr-3'
          = link_to  "削除", task , method: :delete, data: {confirm: "タスク「#{task.name}」を削除します。よろしいですか？"},class: 'btn btn-danger'

tasks_controller.rb

class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end

  def show
    @task = Task.find(params[:id])
  end

  def new
    @task = Task.new
  end

  def edit
    @task = Task.find(params[:id])
  end

  def create
    task = Task.new(task_params)
    task.save!
    redirect_to tasks_url, notice: "タスク「#{task.name}」を登録しました。"
  end

  def update
    task = Task.find(params[:id])
    task.update!(task_params)
    redirect_to task_url, notice: "タスク「#{task.name}」を更新しました。"
  end

  def destroy
    task = Task.find(params[:id])
    task.destroy
    redirect_to tasks_url, notice: "タスク「#{task.name} 」を削除しました。"
  end

  private

  def task_params
    params.require(:task).permit(:name, :description)
  end
end

試したこと

data: {confirm: "タスク「#{task.name}」を削除します。よろしいですか？"}
のjavascriptがうまく動作してないのかなと思い、そこだけ削除してやってみましたが、変わらず削除ではなく、参照してしまいます。
エラー等も起きてないので何をすればいいのか分かりません。
どうかご教示いただけないでしょうか？
宜しくお願い致します。

補足情報（FW/ツールのバージョンなど）

Ruby 3.0.2
Rails 6.1.4.1
yarn 1.22.10

Comments

[neko_daisuki]

assets/javascripts/application.js または javascripts/packs/application.js で
rails-ujs を読み込んでいますか？

[nishino.michiya]

javascripts/packs/application.jsには

```
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import 'bootstrap';
import '../stylesheets/application';

Rails.start()
Turbolinks.start()
ActiveStorage.start()
```
のようになっております。

assetsの中にはそもそもjavascriptsのフォルダーがありません。
rails-ujsというものは見当たらないのですが、それが原因かもしれないということですかね？

[neko_daisuki]

method: ... や、data-confirm は ujs が動いて実現しています。

import Rails from "@rails/ujs"
Rails.start()

となってますね。
このapplication.jsに alert(1) とか書いて、読み込まれてるか確認してみてください。

[nishino.michiya]

書いてありましたね。すみません。

import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import 'bootstrap';
import '../stylesheets/application';

alert(1)

Rails.start()
Turbolinks.start()
ActiveStorage.start()

のようにalert(1)を入れてみましたが、変わらずでした。

[neko_daisuki]

application.html.erb に相当するファイル(拡張子が違うかも)の head のところに
javascript_pack_tag というのは書いてありますか？

[nishino.michiya]

はい！
書いてあります。

doctype html
html
head
title
| Taskapp
meta[name="viewport" content="width=device-width,initial-scale=1"]
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
body
.app-title.navbar.navbar-epand-md.navbar-light.bg-light.navbar-brand taskapp
.container
- if flash.notice.present?
.alert.alert-success = flash.notice
= yield

こちらになります。
何かここに問題があるのでしょうか？

[neko_daisuki]

alert が実行されないのはもしかしたら読み込んでないんじゃないかと思ったんですが
しっかり読み込んでますね・・・

ページを表示して F12 を押すと、コンソールタブにエラーが出ていませんか？

[nishino.michiya]

コンソールにエラーが出てました。

bootstrap.esm.js:1 Uncaught Error: Cannot find module '@popperjs/core'
at webpackMissingModule (bootstrap.esm.js:1)
at Module../node_modules/bootstrap/dist/js/bootstrap.esm.js (bootstrap.esm.js:1)
at __webpack_require__ (bootstrap:19)
at Module../app/javascript/packs/application.js (application.js:1)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83

のようになっております。

[neko_daisuki]

これですね
https://qiita.com/miisha/items/4da037fe8581147b5619

これを解決すればujsも動くと思います。

[nishino.michiya]

ありがとうございます！！！！
やっと動きました。

是非、下の回答に最後のコメントを書いていただけないでしょうか？
よろしくお願いいたします。

Answer 1

method: 'delete' や data-confirm の機能は rails ujs に依存しています。
ujs が読み込まれているか、コンソールにエラーがないかなどして ujs が動作しているか確認しましょう。