Bootstrap (and jquery), webpack, rails - not integrating fully

Question

Second attempt on loading bootstrap (and jquery) for a rails application through webpack and not simply from a CDN. I have followed this great post here: https://stevepolito.design/blog/rails-6-bootstrap-4-webpacker-tutorial/ - I know this references bootstrap 4 (and I am trying with latest bootstrap 5), and I assume this might be the problem. I have adjusted for popper.js being replaced by @popper.js/core (i. e. the "yarn add" line).

Here's what happens: I have dropped sample code from the bootstrap website to check whether tooltips, popovers, and modals work.

• tooltips work but their PLACEMENT does not work (they all appear at the top and not on the bottom / right / left)
• modals do not work at all - I can click and nothing happens
• popovers work but only the title is displayed - not the content

The javascript console does not give any errors. however when I manually try jquery.version, I get a "Uncaught ReferenceError: jquery is not defined".

Here is my config/webpack/environment.js (I inserted the window.jquery line):

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

environment.plugins.prepend(
    'Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        jquery: 'jquery/src/jquery',
        'window.jQuery': 'jquery/src/jquery',
        'window.Tether': "tether",
        Popper: ['popper.js', 'default'],
    })
)


module.exports = environment

Here is my app/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

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

require("jquery")

import "bootstrap"
import "../stylesheets/application";
document.addEventListener("turbolinks:load", function () {
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
        $('[data-toggle="popover"]').popover()
    })
})

Here is my app/stylesheets/application.scss (the styles seem to work btw):

@import '~bootstrap/scss/bootstrap'

Any help appreciated. I did try to search for this - there are quite some posts out there on similar issues but I haven't quite found anything that related to this problem.

Answer 1

To make Bootstrap5 Rail 6 works:

yarn add jquery
yarn add bootstrap@next
yarn add @popperjs/core

Change content of config/webpack/environment.js：

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
   new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery',
      Popper: ['popper.js', 'default'],
   })
)
module.exports = environment

Import bootstrap css at app/assets/stylesheets/application.scss:

 @import "bootstrap/scss/bootstrap";

Then set the content of app/javascript/packs/application.js as:

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

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

require("jquery")
require("@popperjs/core")
import "bootstrap"
// import { Modal } from 'bootstrap'
import { Tooltip, Popover } from 'bootstrap'

jQuery(function () {
  // alert(123456)
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new Tooltip(tooltipTriggerEl)
  })

  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new Popover(popoverTriggerEl)
  })
})

Successful screen: