Search code examples
javascriptjquerystack-overflowjsfiddletwitter-bootstrap-4

Bootstrap 4 JS Throwing Error on SO Embed Snippet Fiddle


Out of curiosity, any clue on why bootstrap 4 js is throwing the following:

enter image description here

when embedding the snippet? (Checking same external Fiddle shows no errors)

  1. Tried adding tether.js but nothing (left it commented).
  2. Tried using jQuery 2.2.1 on external fiddle to see if it could be that but no errors.
  3. CSS file loads fine, happens only when loading the JS on embed snippet.
  4. Most of the time stuff works even with the error displayed.

If anyone could provide an explanation on what's causing the error it would be much appreciated.

Without tether

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>-->

With tether

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>


Solution

  • Updating the order of your including of tether to BEFORE the include of bootstrap's JS appears to work

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>