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>

• aravind: Are you using this code in phtml file?
• aravind: It is working correctly in frontend. I have used this code in list.phtml and review form opens correctly.
• Shoaib Munir: Have you tried $("#popup-modal").modal(); instead of $("#popup-modal").modal("openModal");?
• Sejal Shah: Yes tried, but no luck. The problem here is because of bootstrap. Not sure why bootstrap is causing issue.
• Sejal Shah: @aravind can u share the code. I am also adding the code in list.phtml.

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>