I'm using bootstrap 4.1.x through CDNs

The issue is that half the time when I'm loading a page, JavaScript throws an error:

TypeError: i is undefined

bootstrap.min.js:6:2691

sometimes it comes from bootstrap's utils.js

I'm using JavaScript to generate the HTML parts of the page with:

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

This is the actual string:

<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>

I'm new to JavaScript, so maybe I'm missing something obvious, but I would gladly use any help to find where this error comes from.

edit: the CDNs i'm using

<link async rel="stylesheet" href=".1.0/css/bootstrap.min.css">

<script async src=".js/1.14.0/umd/popper.min.js"></script>

<script async src=".1.0/js/bootstrap.min.js"></script>

<link async href="+Mono" rel="stylesheet">

<script async src=".3.1/jquery.min.js"></script>

I'm using bootstrap 4.1.x through CDNs

The issue is that half the time when I'm loading a page, JavaScript throws an error:

TypeError: i is undefined

bootstrap.min.js:6:2691

sometimes it comes from bootstrap's utils.js

I'm using JavaScript to generate the HTML parts of the page with:

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

This is the actual string:

<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>

I'm new to JavaScript, so maybe I'm missing something obvious, but I would gladly use any help to find where this error comes from.

edit: the CDNs i'm using

<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>

• javascript
• bootstrap-4

• Which version of jQuery did you add to your file? – Phiter Commented May 25, 2018 at 19:29
• @Phiter, jQuery? Doesn't seem like there is any jQuery involved here?! – Ivan Commented May 25, 2018 at 19:31
• 2 Bootstrap uses jQuery, and if he uses an older version it could result in some problems. – Phiter Commented May 25, 2018 at 19:32
• 3.3.1 I'll update the question with the cdn links – Mael Abgrall Commented May 25, 2018 at 19:32
• Are you using DataTables? stackoverflow.com/questions/40767889/… – j08691 Commented May 25, 2018 at 19:33

1 Answer 1

async attribute do not guarantee loading resolution order (see When to use async vs defer when loading scripts?). If Jquery doesn't win the loading race, Boostrap will defect.

You better use defer instead of async and load Jquery first :

<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">