Contrib.social

Fix Popper.js Error When Adding Navbar Dropdown in Varbase Components

Open on Drupal.org →
Created on 1 September 2024, 2 months ago
Updated 16 September 2024, about 2 months ago

Problem/Motivation

When attempting to add a dropdown to the navbar in a Drupal site, a JavaScript error occurs, preventing the dropdown from functioning correctly. The error message indicates that the createPopper function from the Popper.js library is not recognized, leading to a TypeError.

Uncaught TypeError: Popper__namespace.createPopper is not a function
    at Dropdown._createPopper (dropdown.js?showaf:220:40)
    at Dropdown.show (dropdown.js?showaf:137:12)
    at Dropdown.toggle (dropdown.js?showaf:124:51)
    at HTMLButtonElement.<anonymous> (dropdown.js?showaf:390:40)
    at HTMLDocument.handler (event-handler.js?showaf:75:21)
The Responsive Theme Preview → module is loading its Popper.js library

dropdown.js and tooltip.js are allocating the library by @popperjs/core

Not by it’s physical file location and name space.

@popperjs/core@2.9.2 is working but 2.11.8 is not

  • Add a dropdown menu to the navbar in your Drupal site.
  • Ensure that the dropdown.js file is included and that Popper.js is supposed to be loaded.
  • Attempt to toggle the dropdown menu by clicking on it.
  • Observe the JavaScript console for the error message mentioned above.

Proposed resolution

🐛 Error: Uncaught TypeError: Popper__namespace.createPopper is not a function when adding a dropdown in the navbar Needs work

Add aBootstrap Fixer
Add custom Bootstrap fixes and changes over the default provided
Bootstrap 5.3.3 package.

Using UMD in Varbase Components and Vartheme BS5
The UMD format in Bootstrap is using ESM format.
`dropdown.js` and `tooltip.js` are allocating the library by `@popperjs/core`

  • Add Popper global namespace fixer for the `dropdown.js` file in Bootstrap.
  • Add Popper global namespace fixer for the `tooltip.js` file in Bootstrap.
  • Drop the Popper.js library file from the Responsive Theme preview module. Varbase Components and Vartheme BS5 are providing that using Node.js with Bootstrap 5.

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 from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ❌ Release varbase-10.0.2, varbase_components-2.0.5 →

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • Issue #3471477 → : Fixed Popper.js Error When Adding Navbar Dropdown in Varbase Components
🐛 Bug report
Status

Fixed

Version

2.0

Component

Code

Created by

🇯🇴Jordan Rajab Natshah Jordan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024