Bootstrap JS conflict with Jquery Ui

Question

I've a block Which show a bootstrap modal by a template file.

So I've making a Bootstrap module with require js located in app/code/Vendor/Bootstrap/view/web/requirejs-config.js with this code :

var config = {
 paths: {
 "jquery.bootstrap": "//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min"
 },
 shim: {
 'jquery.bootstrap': {
 'deps': ['jquery', 'jquery/ui']
 }
 }
};

I put in dependencies jQuery ui because I get this error when I try to open my modal

"cannot call methods on modal prior to initialization"

(I found this on the web).

So my template (from another module) looks like :

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#callMeBack">OPEN THE MODAL</button>
<!-- Modal -->
<div id="callMeBack" class="modal fade" role="dialog">
 <div class="modal-dialog">
 <!-- Modal content-->
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">&times;</button>
 <h4 class="modal-title">Modal Header</h4>
 </div>
 <div class="modal-body">
 // some content
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 </div>
 </div>
 </div>
</div>
<script type="text/javascript">
requirejs(['jquery','jquery/ui', 'jquery.bootstrap'], function (,ドル jQueryBootstrap) {
 $('#callMeBack').modal('hide');
});
</script>

Then my problem isn't fixed, I have always the error

"Error: cannot call methods on modal prior to initialization; attempted to call method 'toggle'"

I don't know why I get this error and where I miss the fix. Can you help me ?

• Kilise: Did you solve this somehow?

Answer 1

I resolve my issue by removing bootstrap JS. Currently magento gives many js features (modals, tabs, etc...) and are in conflict with bootstrap js for example.

Answer 2

In your requirejs-config.js

var config = {
paths: {
 'bootstrap':'js/bootstrap.bundle'
} ,
map: {
 '*': {}
},
shim: {
 'bootstrap': {
 'deps': ['jquery','jquery/ui']
 }
}
};

Then make sure you use the bootstrap.bundle.js rather than bootstrap.js or other min versions.