3

Hello I have an electron app with this html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />

  <!-- jQuery --> 
  <script src="./static/jquery/jquery-3.5.1.min.js"></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css" />
  <!-- Bootstrap JS -->
  <script src="./static/bootstrap/js/bootstrap.min.js"></script>
  <!-- font awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<style>
  /* expand/collapse card style */
  .card-header .fa {
    transition: .3s transform ease-in-out;
  }
  .card-header .collapsed .fa {
    transform: rotate(90deg);
  }
</style>

<body>

  <div class="card">
    <h5 class="card-header">
        <a data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
            <i class="fa fa-chevron-down pull-right"></i>
            Collapsible Group Item #1
        </a>
    </h5>
    <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
        <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
            officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
            wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
            excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
            you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
    </div>
</div>

  <strong>Upload Queue:</strong>
  <div id="uploadList">
  </div>

  <br><br>

  <h3>Drag and Drop Files in the Window.</h3>

  <!-- Adding Individual Renderer Process JS File -->
  <script src="index.js"></script>
</body>

</html>

You can see I include jquery first, then bootstrap and font awesome. But when I run it I get an error in console:

util.js:179 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at Object.jQueryDetection (util.js:179)
    at util.js:195
    at bootstrap.min.js:6
    at bootstrap.min.js:6

My jquery is clearly before bootstrap, what gives? I am trying to have all my dependencies be local files instead of libraries.

Improve this question
4
  • Just place <!-- Bootstrap JS --> <script src="./static/bootstrap/js/bootstrap.min.js"></script> after <!-- jQuery -->
    – Harish
    Commented Jul 26, 2020 at 5:10
  • it is placed after jquery
    – Martin
    Commented Jul 26, 2020 at 20:02
  • I have the same Problem. Did you get your answer?
    – Benjamin Martin
    Commented Dec 16, 2020 at 22:00
  • @BenjaminMartin yes I did get it to work eventually with a different <head> configuration, just try some of the other multiple bootstrap/jquery electron turorials online, and see the answer I just posted
    – Martin
    Commented Dec 17, 2020 at 3:28

1 Answer 1

Reset to default
2 
<head>
  <meta charset="UTF-8">
  <title>digify</title>
  <!-- css  -->
  <link rel="stylesheet" href="./src/style2.css" />


  
  <script>window.$ = window.jQuery = require('jquery');</script>
  <script>require('popper.js');</script>
  <script>require('bootstrap');</script>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./src/static/bootstrap/css/bootstrap.min.css" />
  <link rel="stylesheet" href="./src/static/font-awesome/css/font-awesome.min.css">
  <!-- row reorder css -->
  <link rel="stylesheet" href="./src/static/datatables/rowReorder.dataTables.min.css">
  <link rel="stylesheet" href="./src/static/datatables/jquery.dataTables.min.css">

</head>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.