installation of bootstrap-table not working properly with rails 6, webpack and bootstrap5, it sets bootstra4 version on table instead

Question

What I have done

I have a project where bootstrap5 is working properly. I tried to install bootstrap-table with

yarn add bootstrap-table

in application.js I got:

import 'bootstrap-table/dist/bootstrap-table.min.js'
import 'bootstrap-table/dist/locale/bootstrap-table-de-DE.min.js'

and in backend.sass:

@import '~bootstrap-table/dist/bootstrap-table.min.css'

Details

jquery was added with yarn and is v3.6.0 and I have first

import $ from 'jquery' in application.js

and in environment.js:

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

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

Problem

so now the styles are not applied correctly and it applies bootstrap4 to the table class:

When I enter bootstrap5 instead the style is correclty applied, elsewise not. Also the Dropdown for pagination is not working. When I click on it nothing pops up. The normal dropdown from bootstrap5 is working by itself outside of bootstrap-table.

What I tried

I have tried to change imports a lot, installed different yarn packages. I found this issue on the github repo. Adding the constant in application.js is not working for me.

They wrote the bootstrap version would be read out in index.js likewise:

let bootstrapVersion = 4

try {
  const rawVersion = $.fn.dropdown.Constructor.VERSION

  // Only try to parse VERSION if it is defined.
  // It is undefined in older versions of Bootstrap (tested with 3.1.1).
  if (rawVersion !== undefined) {
    bootstrapVersion = parseInt(rawVersion, 10)
  }

for some reason $.fn.dropdown.Constructor is undefined for me. Tried to change imports to fix this, but not sure why it is not working.

Answer 1

check answers provided here https://github.com/wenzhixin/bootstrap-table/issues/5837#issuecomment-952301379

helped to solve the issue the following way:

// bootstrap.js
import 'bootstrap/dist/js/bootstrap'
window.bootstrap = {
  Tooltip: {
    VERSION: "5"
  }
}

instead import the new bootstrap.js BEFORE importing Bootstrap Table in application.js For example:

import '../assets/js/bootstrap'
import 'bootstrap-table/dist/bootstrap-table.js'
import 'bootstrap-table/dist/bootstrap-table.min.css'

the file has probably to be included since webpacker may change the code execution after imports if you try to add window.bootstrap ... within application.js