Magento 2.2.2 bootstrap.min.js:7 Uncaught TypeError: f[b] is not a function

Question

I am Using Magento 2.2.2. I have inserted this code in the Block i.e Content>Block when wei click on the Ask an Expert image , The Modal popup should appear. But currently its not showing popup, the error is show.

<div class="call-us">
    <div class="call-us-content">
        <a id="click-me" href="#"><img src="{{media url="wysiwyg/icon/askanExpert.png"}}" alt="Ask an Expert" style="height: 50px; position: relative;" /></a>
    </div>

</div>
<div id="popup-mpdal"  style="display:none;">
<br>
<img src="{{media url="wysiwyg/icon/IconAskExpert.png"}}" alt="Ask an Expert" />
<br/>
<p style="font-size: 17px;">Mon-Sat (10 AM to 6 PM)</p>
<p style="font-size: 18px;">Get Free Consultation From Our Certified Expert</p><br>
<p style="color: #2B375C;font-size: 35px;"><em class="fa fa-phone" style=" padding-right: 10px;    position: relative;
    top: 2px;"></em><a style="    color: #76c705;" href="tel:0120-4673988">0120-4673988</a></p>
</div>
<script type="text/javascript" xml="space">
    require(
        [
     'jquery',
            'Magento_Ui/js/modal/modal',
            '!domReady'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
               modalLeftMargin: 45,
                title: 'Consult our Expert',
  modalClass: 'ask-our-expert',
 clickableOverlay: true,
  buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]

            };


 var popup = modal(options, $('#popup-mpdal'));

            $("#click-me").on('click',function(){ 

             $("#popup-mpdal").modal("openModal");

            });

        }
    );

</script>

Answer 1

I got the same issue when I was using the "modal" function of the Magento-UI. It was fixed using a noConflict function from bootstrap.

$.fn.bsModal = $.fn.modal.noConflict();

For example, in my case, I got this issue using the Magemenu extension so it was fixed the following way

 require(['jquery',"Ves_All/lib/bootstrap/js/bootstrap.min"], function ($) {
    $.fn.bsModal = $.fn.modal.noConflict();
    ...
    ...
 });

After that, I could use the modal of the Magento-UI without problems.

Answer 2

Better late than never

Thought it would be best if I propose a complete solution here which works for me.

Firstly adding the following line of code at the top of your JS file (widget, component,...):

$.fn.bsModal = $.fn.modal.noConflict();

Like this:

define([
    'jquery',
    'Magento_Ui/js/modal/modal',
    'mage/translate',
    'mage/url'
], function ($, modal, $t, mageUrl) {
    'use strict';

    $.fn.bsModal = $.fn.modal.noConflict();

    // more code
});

Secondly, initiate a modal like usual, no changes to this procedure:

modal(options, $('#modal-id'));

Lastly, call a modal like this:

$("#modal-id").bsModal("show");

instead of

$("#modal-id").modal("openModal");

Happy coding!

Answer 3

I resolved it by lowering down the bootstrap version

Current one : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

before I was using 3.3.7