$(...).modal is not a function

Question: How do you resolve the error that says "$(....).modal is not a function" in Bootstrap 5 and jQuery 3.6.0 ?



Login to See the Rest of the Answer

Answer: There is a big chance that you are calling the jQuery and Boostrap CDN or scripts way later than you are calling the $('.MyModal').modal('show'); check the steps to verify that everything is how it is supposed to be.

1. Check that you have loaded only one version of each, Bootstrap, Popperjs, and jQuery.
2. Verify that jQuery, Bootstrap 5, and Popperjs are loaded in this order. 
     - First, load jQuery in your Dom (Am not sure if Bootstrap 5 went away with depending on jQuery, if yes comment below)
     - Second, load the Boostrap script in your Dom
     - Third, load Popperjs
3. Very that jQuery is properly loaded and that there is no error in the Browser Dev Console, check the Network tab too, to be sure no 404 on any resources.
4. If you still have a problem with the Bootstrap 5 Modal not showing up, see below:
     - Make sure you have created your script as shown in the code.

$(document).ready(function(){
 //code to show your modal in here    
  })

This will make sure that the code that shows the modal is executed when the page has loaded and all the scripts are loaded as well.

- Leave a comment below indicating if this helped you.