Desde Bootstrap 5.0.0, parece que el archivo Bootstrap JS debe cargarse al final del <body> para renderizar Modals cargados dinámicamente (y quizás otras características). Verifique este problema en GitHub
De acuerdo con este problema. Esto sucede en la versión de producción de bootstrap 5.x, independientemente de cómo inicialice el modal. Ya sea dinámicamente a través de JS o mediante atributos de datos.
Actualmente, la solución para superar este problema es cargar
bootstrap.bundle.jsdentro del cuerpo HTML y no en el encabezado. Pero idealmente no puede ser la solución a este problema.
¿Conoces otra solución para este problema?
// Error happens when I want to display a Modal using JS var modal = new bootstrap.Modal(document.getElementById('my-modal'); modal.show(); // Uncaught TypeError: BACKDROP: Option "rootElement" provided type "null" but expected type "element". // typeCheckConfig bootstrap.bundle.js:190 // typeCheckConfig bootstrap.bundle.js:184 // _getConfig bootstrap.bundle.js:4603 // Backdrop bootstrap.bundle.js:4539 // _initializeBackDrop bootstrap.bundle.js:4864 // Modal bootstrap.bundle.js:4721 // <anonymous> debugger eval code:2 La solución más simple es cargar nuestro JS al final de la etiqueta <body> :
# app/views/layout/application.html.erb <body> <%= yield %> <%# this `javascript_pack_tag` is initially inside the `<head>` tag <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </body>