я не определен [начальная загрузка 4]

Question

Я использую загрузчик 4.1.x через CDN

Проблема в том, что половину времени при загрузке страницы JavaScript выдает ошибку:

TypeError:я не определен

bootstrap.min.js: 6: 2691

иногда это происходит из утилиты bootstrap.части страницы с:

document.getElementById("something").innerHTML = myString;

Это действительная строка:

<div class="col-sm-6 col-md-4 col-lg-4 mt-4">
  <div class="card">
    <a class="modal-link" data-toggle="modal" href="#educ">
      <div class="card-block">
        <h5 class="card-title">
          <img class="card-img" src="/content/images/logo.png"> Logo</h5>
        <div class="card-text">
          some text
        </div>
      </div>
    </a>
  </div>
</div>



<div class="modal fade" id="educ">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h4 class="modal-title">modal title</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <!--modal body-->
      <div class="modal-body d-flex flex-column h-100">
        <h4>title</h4>

        <div class="mx-auto text-center">
          <img src="#" class="img-responsive img-thumbnail img-modal" alt="Paris">
        </div>

        <button type="button" class="btn custombtn-red" data-toggle="collapse" data-target="#esm">
          <i class="fa fa-chevron-down" aria-hidden="true"></i> cours</button>
        <div id="esm" class="collapse">
          <p class="titre2">collapse text</p>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn custombtn-red" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Я новичок в JavaScript, поэтому, возможно, я упускаю что-то очевидное, но я бы с удовольствиемвоспользуйтесь любой помощью, чтобы найти источник этой ошибки.

edit: CDN, которые я использую

<link async rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<script async src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<script async src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link async href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

атрибут async не гарантирует порядок разрешения загрузки (см. Когда использовать async vs defer при загрузке скриптов? ).Если Jquery не выиграет гонку загрузки, Boostrap выйдет из строя.

Вам лучше использовать defer вместо async и сначала загрузить Jquery:

<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">