Unable to work with bootbox 6 with bootstrap 5

[umairchd]

Hello everyone I am working on the rails 6.1 project having bootstrap 4 and bootbox 5 install and it is working fine.Recently bootstrap upgrade to 5.x.x and we need to upgrade the bootbox to 6 but after upgrading we start getting following issue

Issue: Error: "$.fn.modal" is not defined; please double check you have included the Bootstrap JavaScript library application.js file contain these import.

import $ from "jquery" import 'jquery' import '@popperjs/core' import "bootstrap" import bootbox from "bootbox" window.$ = $ window.bootbox = bootbox

Here we see that the bootbox object is shown but when ever we called it attibutes or function like alert prompt dialog etc it crash

[lu-x]

As the error message shows "$" is being accessed here which is usually used for jQuery. I was able to fix it by importing jQuery before bootstrap like this:

import '../src/javascripts/jquery'
import 'bootstrap'
import bootbox from 'bootbox'

../src/javascripts/jquery looks like:

import jquery from 'jquery'
window.jQuery = jquery
window.$ = jquery

[jgtyrrell]

I have the same error using the following setup: Laravel 9 and Vite jQuery 3.6.3 Bootstrap 5.2.3 Bootbox 6.0.0

I'm importing the packages into an index.js file for module bundling in Vite as follows:

import jquery from 'jquery'; window.jQuery = jquery; window.$ = jquery;

import * as bootstrap from 'bootstrap'; window.bootstrap = bootstrap;

import bootbox from 'bootbox'; window.bootbox = bootbox;

I get the following in web developer console:

Other packages that require jQuery being imported this way work fine, e.g. DataTables.

As far as I can tell this is a bug in Bootbox. Modals are no longer referenced using $.fn.modal in Bootstrap 5 but instead use new bootstrap.Modal.

Please can you help?

[lu-x]

@jgtyrrell I think you have to import jquery through a separate file (like shown in my previous comment), this will make sure jQuery will be imported before bootbox.

[jgtyrrell]

Thanks @lu-x, that totally worked!

[tiesont]

As far as I can tell this is a bug in Bootbox. Modals are no longer referenced using $.fn.modal in Bootstrap 5 but instead use new bootstrap.Modal.

Not really. We're still using jQuery and the jQuery API of Bootstrap, so $.fn.modal needs to be callable for bootbox to work. This is noted in the Dependencies section: https://bootboxjs.com/getting-started.html#dependencies

Eventually we want to strip jQuery (and probably the UMD wrapper) out, but that's not happening anytime soon.

[doelmi]

As the error message shows "$" is being accessed here which is usually used for jQuery. I was able to fix it by importing jQuery before bootstrap like this:

import '../src/javascripts/jquery'
import 'bootstrap'
import bootbox from 'bootbox'

../src/javascripts/jquery looks like:

import jquery from 'jquery'
window.jQuery = jquery
window.$ = jquery

This works!