webentwicklung-frage-antwort-db.com.de

Bootstrap: Nicht abgerufener TypeError: Die Eigenschaft 'fn' von undefined kann nicht gelesen werden

Ich versuche eine Electron-Anwendung mit Bootstrap zu erstellen. Ich bekomme diese Fehlermeldung: 

Uncaught TypeError: Cannot read property 'fn' of undefined
at setTransitionEndSupport (bootstrap.js:122)
at bootstrap.js:199
at bootstrap.js:201
at bootstrap.js:9
at bootstrap.js:10

Meine Abhängigkeiten in package.json sind:

"dependencies": {
  "bootstrap": "^4.1.2",
  "electron": "^2.0.5",
  "jquery": "^3.3.1",
  "popper.js": "^1.14.3"
}

Meine index.html-Datei lautet:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Release Management Report</title>

</head>

<body>

  <div class="container">

    <h1>Bootstrap Test</h1>

    <p>
        We are using node
        <script>document.write(process.versions.node)</script>, Chrome
        <script>document.write(process.versions.chrome)</script>, and Electron
        <script>document.write(process.versions.electron)</script>.
    </p>

  </div>

  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

</body>

</html>

Dann wird die html-Datei von main.js aus dem Schnellstart von Electron geladen:

const { app, BrowserWindow } = require('electron')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({ width: 800, height: 600 })

  // and load the index.html of the app.
  win.loadFile('index.html')

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

Die meisten Lösungen, die ich gefunden habe, sagen mir, dass ich jQuery vor Bootstrap importieren soll.

Danke für die Hilfe!

4
Griford

Ich habe einen Weg gefunden, um das Problem zu lösen.

Ich habe ein Skript in die index.html eingefügt:

<script src="scripts/script.js"></script>

und das ist der Inhalt von script.js:

window.$ = window.jQuery = require('jquery'); // not sure if you need this at all
window.Bootstrap = require('bootstrap');

und wir können diese Zeilen aus index.html entfernen, um Doppelimport zu vermeiden:

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

Ich habe diese Lösung unter: https://github.com/understrap/understrap/issues/449 , Unter dem Kommentar von karo1915 gefunden.

7
Griford

In meinem Fall hatte ich die Reihenfolge der Importe von Skripten falsch. Der Bootstrap-Import sollte nach dem Popper- und Jquery-Import erfolgen. 

Da Bootstrap v4. + Von popper.js und jquery abhängt

"scripts": [
          "./node_modules/jquery/dist/jquery.slim.min.js",
          "./node_modules/popper.js/dist/umd/popper.min.js",
          "./node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
1
Anuj Kumar

Dank der Antwort von Griford konnte ich meine Angular & Electron-App mit Bootstrap zum Laufen bringen. Ich wollte hier nur beitragen, dass keine externe Datei benötigt wird - Sie können JQuery und Bootstrap auch in einem Skriptblock initialisieren:

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

Das funktioniert bei mir mit folgenden Versionen (Electron 2.0.7):

"bootstrap": "^4.1.3",
"jquery": "^3.3.1",
"popper.js": "^1.14.4"

ANMERKUNG: Für die Verwendung von Bootstrap ist keine weitere Skriptintegration erforderlich, wenn sie durch die beiden obigen Zeilen initialisiert wird. Das einzige, was Sie zusätzlich benötigen, ist das CSS (in meinem Fall über das Paket angle.json hinzugefügt).

1
Achim Schrepfer

Ich bekomme dieselbe Fehlermeldung mit bootstrap 4.1.3, und ich bin sicher, dass die Reihenfolge der Skripts korrekt ist. Jquery wird vor bootstrap platziert.

Da ich diese Skripts in tampermonkey-Skripts (ein Browser-Add-On zum Verwalten von Skripten von Drittanbietern, die die aktuelle Webseite ändern können) mit dem @require-Attribut geladen habe, ist es schwierig, Codes zwischen dem Laden von Jquery und dem Laden von Bootstraps einzufügen. 

Durch das Wechseln zu einer früheren Version 3.3.7 von Bootstrap wird der Fehler behoben. Das Warten auf die nächste Version von Bootstrap würde dieses Problem lösen.

0
dasons