javascript - tutorial - bootstrap.min.js: 6 Error no detectado: el menú desplegable Bootstrap requiere Popper.js

bootstrap tutorial

Question

De repente, empecé a recibir un error cuando intentaba abrir mi menú desplegable:

 bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
at bootstrap.min.js:6
at bootstrap.min.js:6
at bootstrap.min.js:6

Estoy usando el archivo de arranque estándar

<script src="https://getbootstrap.com/dist/js/bootstrap.min.js">

¿Algo cambiado en bootstrap tengo que cuidar?

Orden que estoy cargando archivos está siguiendo

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="{{ STATIC_URL }}/static/jquery/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="{{ STATIC_URL }}/static/jquery/jquery-ui.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don''t actually copy the next line! -->
<script src="https://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>

Answer 1

¿Leíste la introducción de Bootstrap? https://getbootstrap.com/docs/4.0/getting-started/introduction/#quick-start

Tienes que agregar algunos scripts para que bootstrap funcione completamente. Popper.js es uno de ellos:

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Answer 2

Bootstrap 4 aún no es una herramienta madura. La parte de requerir que otro complemento funcione es aún más complicada, especialmente para los desarrolladores que han estado usando Bootstrap por un tiempo. He visto muchas formas de eliminar el error, pero no todas funcionan para todos. Creo que la mejor y más limpia forma de trabajar con Bootstrap 4. Entre los archivos de instalación de Bootstrap, hay uno con el nombre "bootstrap.bundle.js" que ya viene con Popper incluido.

Answer 3

Como se señaló here , debe usar el script en el subdirectorio UMD, en mi caso

 bundles.Add(new ScriptBundle("~/bundles/projectbundle").Include(
"~/Scripts/umd/popper.js",
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/summernote-bs4.js"));

Específicamente esto: "~ / Scripts / umd / popper.js",

Answer 4

En mi caso, estoy usando los paquetes de Visual Studio y Nuget, porque tienen bibliotecas duplicadas, una en la misma carpeta que jQuery y otra en la carpeta umd. Al eliminar los archivos javascript de popper del mismo nivel que jQuery y refere a popper.js dentro de la carpeta umd, solucioné mi problema y puedo ver las sugerencias de herramientas correctamente.

Answer 5

Para que Bootstrap Beta funcione correctamente, debe colocar los scripts en el siguiente orden.

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Answer 6

incluya popper.js antes de bootstrap.min.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js use este enlace para obtener popper