Вкладки Bootstrap 4 и ошибка javascript ajax

Я использую вкладки Bootstrap 4 для отображения содержимого, полученного из вызова AJAX. Проблема в том, что я получаю сообщение об ошибке, когда вызов завершен.

Ошибка

Uncaught TypeError: $(...).tab is not a function

Вкладки изначально скрыты, и результат вызова AJAX определяет, какие вкладки отображаются и какую вкладку открывать.

Вкладки являются стандартным примером:

<ul class = "nav nav-tabs" id = "myTab" role = "tablist">
    <li class = "nav-item">
        <a class = "nav-link active" id = "home-tab" data-toggle = "tab" href = "#home" role = "tab" aria-controls = "home" aria-selected = "true">Home</a>
    </li>
    <li class = "nav-item hidden">
        <a class = "nav-link" id = "home-tab" data-toggle = "tab" href = "#Anotherhome" role = "tab" aria-controls = "home" aria-selected = "true">Another Home</a>
    </li>
    <li class = "nav-item hidden" id = "profile-tab-container">
        <a class = "nav-link" id = "profile-tab" data-toggle = "tab" href = "#profile" role = "tab" aria-controls = "profile" aria-selected = "false">Profile</a>
    </li>
    <li class = "nav-item hidden">
        <a class = "nav-link" id = "contact-tab" data-toggle = "tab" href = "#contact" role = "tab" aria-controls = "contact" aria-selected = "false">Contact</a>
    </li>
</ul>
<div class = "tab-content" id = "myTabContent">
    <div class = "tab-pane fade show active" id = "home" role = "tabpanel" aria-labelledby = "home-tab">Home</div>
    <div class = "tab-pane fade" id = "Anotherhome" role = "tabpanel" aria-labelledby = "home-tab">Another Home</div>
    <div class = "tab-pane fade" id = "profile" role = "tabpanel" aria-labelledby = "profile-tab">Profile</div>
    <div class = "tab-pane fade" id = "contact" role = "tabpanel" aria-labelledby = "contact-tab">Contact</div>
</div>

Вызов AJAX также является стандартным. Он называется $(document).ready :

$.ajax({
    url: _url,
    method: "GET",
    success: function (data) {
        // data object gets populated here

        var _profileTab = $("#profile-tab-container");  // <= this is valid - correct object retrieved
        _profileTab.show();                             // <= show the tab on the screen. no error here
        $("#profile-tab").tab("show");                  // <= use the internal bootstrap method to select the tab. error here

    },
    error: function (err) {
        // error handling here;
    }
});

Если я поставлю точку останова на строку, которая вызывает ошибку:

$("#profile-tab").tab("show");  

вы можете видеть, что на странице есть все содержимое, но стили начальной загрузки не были применены, т.е. не настроены вкладки. Так может быть, вкладки не были применены к моменту завершения вызова AJAX?

Примечание. Ошибка возникает при загрузке страницы, но если я снова вызываю функцию AJAX вручную (через кнопку), все работает нормально.

Есть ли способ запустить весь вызов AJAX или метод отображения после применения вкладок? Или какой-то другой способ отображать контент и взаимодействия без ошибок? Я не против отображать весь контент на странице и скрывать его после совершения звонка?