web-dev-qa-db-fra.com

Bootstrap: Uncaught TypeError: Impossible de lire la propriété 'fn' de non définie

J'essaie de faire une application Electron avec Bootstrap. Je reçois ce message d'erreur: 

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

Mes dépendances dans le package.json sont:

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

Mon fichier index.html est:

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

Ensuite, le fichier html est chargé par le main.js à partir du démarrage rapide d’Electron:

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()
  }
})

La plupart des solutions que j'ai trouvées me disent d'importer jQuery avant Bootstrap, mais c'est déjà ce que je fais.

Merci pour l'aide!

jquerynode.jsbootstrap-4electron
4
Griford

J'ai trouvé un moyen de résoudre le problème.

J'ai ajouté un script dans le fichier index.html:

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

et voici le contenu de script.js:

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

et nous pouvons supprimer ces lignes de index.html pour éviter la double importation:

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

J'ai trouvé cette solution sur: https://github.com/understrap/understrap/issues/449 , Sous le commentaire de karo1915.

7
Griford

Dans mon cas, la commande des importations de scripts était erronée. L'importation bootstrap devrait intervenir après les importations popper et jquery. 

Depuis Bootstrap v4. + Dépend de popper.js et de jquery

"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

Grâce à la réponse de Griford, j'ai réussi à faire fonctionner mon application Angular & Electron avec Bootstrap. Tout ce que je voulais contribuer ici, c'est qu'aucun fichier externe n'est nécessaire - vous pouvez initialiser JQuery et Bootstrap dans un bloc de script également:

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

Cela fonctionne pour moi avec les versions suivantes (Electron 2.0.7):

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

REMARQUE: aucune autre intégration de script n'est nécessaire pour utiliser Bootstrap lorsqu'il est initialisé par les deux lignes ci-dessus. La seule chose dont vous avez besoin en plus est le CSS (dans mon cas, ajouté au paquet via angular.json).

1
Achim Schrepfer

Je reçois la même erreur avec bootstrap 4.1.3, et je suis sûr que l'ordre du script est correct, jquery est placé avant bootstrap.

Étant donné que je charge ces scripts dans des scripts tampermonkey (un add-on de navigateur permettant de gérer les scripts tiers pouvant modifier la page Web actuelle) à l'aide de l'attribut @require, il est difficile d'injecter des codes entre le chargement de jquery et le chargement d'amorçage. 

Le passage à une version précédente 3.3.7 de bootstrap résout l’erreur. Attendre la prochaine version de bootstrap résoudrait ce problème.

0
dasons