Modal error in checkout

Question

In default magento checkout page, mobile version, clicking the minicart icon opens a modal containing cart contents.

When checkout page is loaded for the first time, clicking that minicart icon gives javascript error:

Uncaught TypeError: No method named "openModal"
    at HTMLDivElement.<anonymous> (bootstrap.min.js:6)
    at Function.each (jquery.js:370)
    at jQuery.fn.init.each (jquery.js:137)
    at jQuery.fn.init.o._jQueryInterface [as modal] (bootstrap.min.js:6)
    at Object.show (sidebar.js:24)
    at UiClass.showSidebar (estimation.js:44)
    at HTMLButtonElement.<anonymous> (knockout.js:4255)
    at HTMLButtonElement.dispatch (jquery.js:5226)
    at HTMLButtonElement.elemData.handle (jquery.js:4878)

After refreshing page, modal opens normally.

Modal is defined in file vendor/magento/module-checkout/view/frontend/web/template/sidebar.html:

<div id="opc-sidebar"
     data-bind="afterRender:setModalElement, mageInit: {
    'Magento_Ui/js/modal/modal':{
        'type': 'custom',
        'modalClass': 'opc-sidebar opc-summary-wrapper',
        'wrapperClass': 'checkout-container',
        'parentModalClass': '_has-modal-custom',
        'responsive': true,
        'responsiveClass': 'custom-slide',
        'overlayClass': 'modal-custom-overlay',
        'buttons': []
    }}">

    <!-- ko foreach: getRegion('summary') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->

    <div class="opc-block-shipping-information">
        <!-- ko foreach: getRegion('shipping-information') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>
</div>

Is there any way to fix this and force Magento_Ui/js/modal/modal to load earlier in page? Any ideas?

Answer 1

I wasn't able to find the casue of this, so I fixed it by forcing modal to work using javascript:

require(['jquery', 'Magento_Ui/js/modal/modal'], function($){
    $(document).on('click', '#checkout_order_sum_mobile', function(e){
        $(".opc-sidebar.opc-summary-wrapper").toggleClass("_show");
    });
});