1

I'm trying to use Bootstrap in my first Electron.js app. The dropdown button does appear, but the menu itself doesn't appear when I click on the button. I suspect there is something wrong with how I've added Bootstrap and jQuery to the app.

Here is my index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Magic</title>
    <script>let $ = require('jquery');</script>
    <script>require('popper.js');</script>
    <script>require('bootstrap');</script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>

    <img src="../assets/true.png">

    <h1>Magic Demo!</h1>
    <p>Welcome to the most magical demo ever!</p>

    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle"
              type="button"
              id="dropdownMenu2"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false">
        Dropdown
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
      </div>
    </div>

  </body>
</html>

I added Bootstrap, jQuery and Popper.js via npm and this is the relevant part of my package.json:

"dependencies": {
    "bootstrap": "^4.6.0",
    "electron-log": "^4.3.2",
    "electron-squirrel-startup": "^1.0.0",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1"
  },

Also, I discovered that on the Electron DevTools, I get the error: "Uncaught ReferenceError: require is not defined"

RockAndaHardPlace
  • 417
  • 1
  • 7
  • 18
  • Does this answer your question? [Client on Node.js: Uncaught ReferenceError: require is not defined](https://stackoverflow.com/questions/19059580/client-on-node-js-uncaught-referenceerror-require-is-not-defined) – Arleigh Hix Mar 12 '21 at 21:05

2 Answers2

0

You are loading the bootstrap.js before the content. If the elements do not exist in the DOM when the script is loaded it will have no effect.

The Bootstrap Docs tell you where to place the script:

... near the end of your pages, right before the closing </body> tag, to enable them.

Arleigh Hix
  • 9,990
  • 1
  • 14
  • 31
0

The Bootstrap 4.6.0 drop-down menu doesn't open with jQuery version 3.6.0, but works correctly with jQuery 3.5.1. I just tried it, and it's true.

Try downgrading jQuery to version 3.5.1.

Jan Jurníček
  • 126
  • 1
  • 5