rails6で'data-confirm-modal'を使いたい

Question

前提・実現したいこと

rails6でdata-confirm-modalを導入して、以下のような削除確認モーダルを作成したい。

※ data: {confirm: }の確認ダイアログをいい感じにする【Ruby on Rails】から拝借させていただきました。

バージョン

ruby 2.7.1p83
Rails 6.0.3.5

現状

このようにデフォルトのモーダルが出てしまっています。

試した手順

1．gemfileに記載

gem 'data-confirm-modal'
gem 'jquery-rails'
gem 'bootstrap-sass', '3.4.1'

2．bundle install 実行

3．application.jsに追記する

app/javascript/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.

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


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

//= require data-confirm-modal ←これを追記

4． railsアプリを再起動する

bundle exec rails s

5. viewを修正

<%= link_to 'Destroy', "/competitions/#{@competition.id}", method: :delete, data:
          { confirm: '本当に削除して良いですか?',
            cancel: 'やめる',
            commit: '削除する'}, title: '削除確認' %>

6. 結果

補足情報

こちらのサイトを参考にさせていただきました。
data: {confirm: }の確認ダイアログをいい感じにする【Ruby on Rails】

Answer 1

gemを使うのでなく、webpackを使う

1.Gemfileからdata-confirm-modalを削除
2.yarn add jquery popper.js bootstrap@3 data-confirm-modal
3.config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
  })
)

module.exports = environment

4.app/javascript/packs/application.js

require('popper.js')
require('bootstrap')
require('@rails/ujs').start()
require('data-confirm-modal')
// other require statements