Magento 2 - No method named openmodal when bootstrap bundle js is used

Question

I want to display a review form in the modal popup on the click of a button. However, the code gives this error

Uncaught TypeError: No method named "openModal"

I am using bootstrap.bundle.js in my application. If I remove that the popup is displayed without any error message.

Code I am using:

<div>
    <a href="#" id="click-me">Click Me</a>
</div>
<div id="popup-modal" style="display:none;">
    <?php echo $this->getLayout()->createBlock("Magento\Review\Block\Form")->setTemplate("Magento_Review::form.phtml")->toHtml(); ?>
</div>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'popup modal title',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };
            var popup = modal(options, $('#popup-modal'));
            $("#click-me").on('click', function () {
                $("#popup-modal").modal("openModal");
            });
        }
    );
</script>

Answer 1

I have also faced same problem. Its due to merging the modal.js in the bundle.js files

In magento 2 we can exclude the modal.js file from bundling by placing the exclude code in

/design/frontend/<--Magento-->/<--Luma-->/etc/view.xml

---

<exclude>
  ....
  <item type="file">Lib::mage/bootstrap.js</item> <!-- for excluding bootstrap-->
  <item type="file">Lib::Magento_Ui/js/modal/modal.min.js</item><!-- for excluding modal-->
  ....
</exclude>