Problem/Motivation
Drupal ~11.3 core ships jQuery 4. The bundled Bootstrap 4 JavaScript in js/bootstrap/bootstrap.min.js has a version gate that rejects jQuery 4 and throws: Bootstrap's JavaScript requires at least jQuery v1.9.1 but less than v4.0.0. When it throws, the front end breaks: sticky header, scroll classes, dropdowns, collapse/navbar toggler, modal, carousel.
Steps to reproduce
Install the theme as default on Drupal ~11.3 and open any front-end page; the browser console shows the jQuery version error and Bootstrap behaviours do not run.
Proposed resolution
Patch the bundled Bootstrap JS jQuery gate from t[0]>=4 to t[0]>=5 so Bootstrap 4.6 runs on core jQuery 4. Same approach used by the bootstrap4 theme (3.0.7) and the bootstrap theme (8.x-3.35). Add a js/bootstrap/README.md documenting the fix and how custom themes and modules should migrate jQuery 3 code to jQuery 4.
Remaining tasks
- ✅ File an issue about this project
- ✅ Addition/Change/Update/Fix to this project
- ✅ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support on feature change/addition
- ➖ User Guide Documentation support on feature change/addition
- ➖ UX/UI designer responsibilities
- ➖ Accessibility and Readability
- ✅ Code review by maintainers
- ✅ Full testing and approval
- ✅ Credit contributors
- ✅ Review with the product owner
- ✅ Update Release Notes
- ✅ Release varbase-9.2.0, vartheme_bs4-9.2.0
User interface changes
- N/A
API changes
- N/A
Data model changes
- N/A
Release notes snippet
fix: #3607041 Bootstrap JavaScript jQuery 4 compatibility on Drupal ~11
Read more
- Drupal core: [11.x] Update to jQuery 4.0.x (#3411839)
- Bootstrap upstream: jQuery 4 support for Bootstrap 4 (twbs/bootstrap #42023)
- Bootstrap4 theme: jQuery 4 compatibility, fixed in 3.0.7 (#3549897)
- Bootstrap theme: jQuery 4 compatibility, 8.x-3.35 (#3464373)
- Radix theme: jQuery 4 error and workarounds (#3530127)
- jQuery Core 4.0 Upgrade Guide
Issue fork vartheme_bs4-3607041
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
rajab natshahComment #5
rajab natshahComment #6
rajab natshah✅ Released vartheme_bs4-9.2.0
Comment #8
rajab natshah✅ Released varbase-9.2.0
Comment #9
rajab natshah