Console error: The bootstrap modal plugin does not appear to be loaded

[ChristofferJoergensen]

I am migrating from Rails 5.2 with the asset pipeline to Rails 6.1.3 with webpacker.

I want to use Bootstrap 5.0.0-beta2 and data-confirm-modal 1.6.2.

I believe I have the proper configuration according to the docs, but I keep getting this in my browser console:

data-confirm-modal.js:80 Uncaught Error: The bootstrap modal plugin does not appear to be loaded.
    at data-confirm-modal.js:80
    at Object.<anonymous> (data-confirm-modal.js:307)
    at Object../node_modules/data-confirm-modal/vendor/assets/javascripts/data-confirm-modal.js (data-confirm-modal.js:307)
    at __webpack_require__ (bootstrap:63)
    at Module../app/javascript/packs/application.js (application.js:28)
    at __webpack_require__ (bootstrap:63)
    at Object.0 (log.js:56)
    at __webpack_require__ (bootstrap:63)
    at bootstrap:198
    at bootstrap:198

But the modal plugin is available, because I can trigger modals. Any idea what is happening?

This is my configuration:

// app/javascript/packs/application.js

require.context("../images", true)
import Rails from "@rails/ujs"
import { Turbo } from "@hotwired/turbo-rails"
window.Turbo = Turbo
import "../stylesheets/bootstrap_overrides"
import "../stylesheets/application"
import "../javascripts/shared"
import "jquery"
import "bootstrap"
window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js')
Rails.start()
require('data-confirm-modal')

/* app/javascript/stylesheets/application.scss */

@import "~bootstrap/scss/bootstrap";

// config/webpack/environment.js

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

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Rails: '@rails/ujs',
    Popper: ['popper.js', 'default']
  })
)

module.exports        = environment

// package.json

{
  "dependencies": {
    "@hotwired/turbo-rails": "^7.0.0-beta.5",
    "@popperjs/core": "^2.9.0",
    "@rails/ujs": "^6.1.3",
    "@rails/webpacker": "5.2.1",
    "bootstrap": "5.0.0-beta2",
    "data-confirm-modal": "^1.6.2",
    "jquery": "^3.6.0",
    ...
  }
}

This Github issue may touch on the subject, but not sure.

[tagliala]

Hi, thanks for the report

We do not support Bootstrap 5 yet, as per #83. Let's use that other thread

We should do some other changes before supporting BS5
https://github.com/ifad/data-confirm-modal/issues/83#issuecomment-782737822

This Github issue may touch on the subject, but not sure.

I can confirm that data-confirm-modal still works with Rails 6.1.3 / Webpacker 5 / Bootstrap 4.6.0 / jQuery 3.6.0

Here it is a demo repository: https://github.com/diowa/ruby3-rails6-bootstrap-heroku/tree/test/test-data-confirm-modal

Relevant commit: https://github.com/diowa/ruby3-rails6-bootstrap-heroku/commit/776448027f44cd126181ec9c83c659a3fbaab76e

[ChristofferJoergensen]

Oh I see. Thanks for clarifying.