How to fix “Uncaught TypeError: Cannot read property 'fn' of undefined” error in Bootstrap?

Bootstrap 4 screams for jQuery first, or it crashes hunting missing $.fn stack scripts clean and modals/dropdowns spring to life without console tantrums.​

Older Bootstrap versions cling to jQuery like glue, but load Bootstrap JS before jQuery, and it faceplants on undefined $.fn right around line 122. Console points the finger every time. Flip the order: jQuery loads, Popper follows, Bootstrap JS trails at page bottom. Bootstrap 5 cuts the cord completely with one bundle file. Wipe cache, fresh tab, errors evaporate.

Bootstrap 4 depends on jQuery. If you load Bootstrap JS before jQuery, you’ll get the dreaded error:

Code

Uncaught TypeError: Cannot read property 'fn' of undefined
      

• WRONG order (causes fn error)

Code

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

• CORRECT BS4 order

Code

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

• BS5 (no jQuery needed!)

Code

<script src="bootstrap.bundle.min.js"></script>