bootstrap is not defined - trying to use Bootstrap Modal

[dmcgrew]

I am trying to use Bootstrap's Modal component. I am getting a "bootstrap is not defined" error though. Here is the relevant js. What am I doing wrong?

import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/carousel';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/offcanvas';
import 'bootstrap/js/dist/popover';
import 'bootstrap/js/dist/scrollspy';
import 'bootstrap/js/dist/tab';
import 'bootstrap/js/dist/toast';
import 'bootstrap/js/dist/tooltip';

//
//  2. Import PopperJS
//     If you use the 'dropdown', 'tooltip', or 'popover' Bootstrap components, you MUST include PopperJS
//     or those components won't work. If you do not use those components, remove this import:
//
//import '@popperjs/core/lib/index.js'

//
//  3. Add your custom JavaScript below, either directly or by importing ES6 modules:
//



( function( $ ) {

    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
      keyboard: false
    });
    
    $("a.dashicons-search").click(function(){
        myModal.toggle();
    });
    

} )( jQuery );

[pattonwebz]

Can you try running it outside the scope of the iife?

var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
  keyboard: false
});

jQuery("a.dashicons-search").click(function(){
    myModal.toggle();
});

[IanDelMar]

Try without the leading bootstrap..

var myModal = new Modal(document.getElementById('exampleModal'), {
    keyboard: false
});

See #1583.

You could also change the click shorthand to

jQuery("a.dashicons-search").on("click",function(){
    myModal.toggle();
});

See https://github.com/jquery/jquery-migrate/blob/main/warnings.md#shorthand-deprecated-v3-jqmigrate-jqueryfnclick-event-shorthand-is-deprecated

[pattonwebz]

It is pretty hard to figure out this issue here without having a test theme setup (which I don't have so my suggestions come from just visually looking at the code and thinking about it). The next thing I would try is running the code later in the page execution - the idea being that maybe the base scripting needs a moment to fully initialise.

import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/carousel';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/offcanvas';
import 'bootstrap/js/dist/popover';
import 'bootstrap/js/dist/scrollspy';
import 'bootstrap/js/dist/tab';
import 'bootstrap/js/dist/toast';
import 'bootstrap/js/dist/tooltip';

//
//  2. Import PopperJS
//     If you use the 'dropdown', 'tooltip', or 'popover' Bootstrap components, you MUST include PopperJS
//     or those components won't work. If you do not use those components, remove this import:
//
//import '@popperjs/core/lib/index.js'

//
//  3. Add your custom JavaScript below, either directly or by importing ES6 modules:
//

window.addEventListener('DOMContentLoaded', (event) => {
    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
      keyboard: false
    });
    
    jQuery("a.dashicons-search").click(function(){
        myModal.toggle();
    });
});

[IanDelMar]

@dmcgrew the pastebin has already expired. Can you please add the compiled script again?

@pattonwebz What base script are you thinking of? Rollup bundles the modal script above the custom script at the bottom and outputs one js file.

[dmcgrew]

Sorry! This one should work.. https://pastebin.mozilla.org/zFLX3PRY

[IanDelMar]

Neither bootstrap, understrap or Modal is defined. Do you load another js file defining any of the objects? Can you please post your rollup and terser config file?

[pattonwebz]

I was thinking about the base bootstrap script and wondered if it had an init method that wasn't immediately invoked and instead ran on an event. Was just a theory based on past experience and not a guarantee to do anything.

[bacoords]

The method we've used pretty consistently is

import Modal from 'bootstrap/js/src/modal';

let modal = new Modal( document.getElementById('example-id') );
modal.show();

or another one:

import Tooltip from 'bootstrap/js/src/tooltip';

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

[IanDelMar]

@bacoords The most recent release still uses the js dist files. This tempts users to use the dist files as well. (Tough it's not that recent anymore). Perhaps it would be reasonable to publish a release with the updated build process (#1632) and Bootstrap 5.2.

[bacoords]

Good point- it's about time we wrapped up a new release.

[adambundy]

@bacoords I commented elsewhere on this issue, and your first suggestion here worked for me. Thanks!!