Bootstrap $(...).tab is not a function error in the Bitrix template that occurs every other time. How to understand what is wrong?

Question

JavaScript

Good afternoon, help me figure it out.

There is a site on bitrix. I'm making a template and here's the problem.

There is a catalog.element component in script.js like this

script.js

(function (window) {
    'use strict';

    if (window.CatalogElement)
        return;

    window.CatalogElement = function (arParams , ajaxParams) {
        this.params = arParams;
        this.ajaxParams = ajaxParams;

        this.tabs = {
            obTabs: BX('tabs-nav'),
            obTabsScroll: 'tabs-nav-scroll',

            objTopTabNav: {
                description: BX('description-tab'),
                characteristic: BX('characteristic-tab'),
                set: BX('set-tab'),
                video: BX('video-tab'),
                documents: BX('documents-tab'),
                payment: BX('payment-tab'),
                delivery: BX('delivery-tab')
            },

            objScrollTabNav: {
                description: BX('description-tab-fix'),
                characteristic: BX('characteristic-tab-fix'),
                set: BX('set-tab-fix'),
                video: BX('video-tab-fix'),
                documents: BX('documents-tab-fix'),
                payment: BX('payment-tab-fix'),
                delivery: BX('delivery-tab-fix')
            }
        };

        this.error = {};

        this.init();
    };

    window.CatalogElement.prototype = {
        init: function ()
        {
            this.initTabs();
        },

        /* region Tabs  */
        initTabs: function()
        {
            BX.bind(this.tabs.objTopTabNav.description , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.characteristic , 'click', BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.set , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.video , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.documents , 'click', BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.payment , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objTopTabNav.delivery , 'click' , BX.proxy(this.tabSelect, this));

            BX.bind(this.tabs.objScrollTabNav.description , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.characteristic , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.set , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.video , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.documents , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.payment , 'click' , BX.proxy(this.tabSelect, this));
            BX.bind(this.tabs.objScrollTabNav.delivery , 'click' , BX.proxy(this.tabSelect, this));

            BX.bind(BX('characteristic-link') , 'click' , BX.proxy(this.tabSelect, this));
        },

        tabSelect: function()
        {
            var element = BX.proxy_context;
            $('html, body').animate({ scrollTop: $($(element).attr('href')).offset().top }, 1500);
            $($(element).attr('href')).tab('show');
        },
    };
})(window);

Everything is simple here, there is such a panel
https://yadi.sk/i/46ZN6uH3CIuYdg

And when you click the page scrolls down to the tabs and opens the desired tab.

So the problem is that this functionality lives its own life (Still exactly the same problem with the modal window from bootstrap). Either work or not. Refreshing the page works, refreshing it again doesn't work, and it always does, regardless of clearing the cache both on the site and in the browser. The error is written by a simple $(...).tab is not a function

Now some information.
Bootstrap included in header.php template file

Connecting js css

<?php
    /**Common CSS Files **/
    Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/bootstrap/bootstrap.min.css');
    Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/css/animate.min.css');
    Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/css/hover-min.css');
    Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/css/all.min.css');

    /**Common JS Files **/
    Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/js/jquery-3.3.1.min.js');
    Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/js/bootstrap.bundle.min.js');
    ?>

Bitrix settings are as follows
Component caching - ON
Managed cache - ON

Optimization of CSS and JS
There were all daws, but in order to understand what connects for what, I left only js to demolish down
https://yadi.sk/i/IB16Ut2jycC_oQ

Files on the page.
https://yadi.sk/i/JHmb4KsmdvhWPQ
The bootstrap is above the script.js file and in theory it should normally see all the bootstrap functions.

I tried both resetting the cache and disabling component caching and that just did not try.
Anyway, 1 time is normal, 1 time is an error. What else can be checked?

Answer 1

In short, I don’t know why it happened, but when I removed the transport company widget from the page, everything worked out. I accidentally removed it and the glitch stopped, I put it back and the glitch continues. I don’t know why, because it has never been displayed in errors, in general, if there are such problems, just turn everything off and connect everything in turn.

Answer 2

this usually happens when the script that uses the function has loaded and tries to execute before the function itself