Fix Popper.js Error When Adding Navbar Dropdown in Vartheme BS5

I confirm the issue

Which version of Varbase or its components (Varbase 10.0.x-dev development, the latest release, Varbase Components, or Vartheme BS5) are you facing this issue with?

How did the issue develop after the changes in 🐛 Fix dropdown menu limited to only two levels Fixed ? Could you describe what happened?

#3456935 was committed, but not released yet.

I'm using Varbase 10.0.x-dev, Varbase Components version 2.0.2+1-dev, and Vartheme BS5 version 3.0.0-rc1+1-dev.

I don't believe the issue is related to the changes from #3456935: Fix dropdown menu limited to only two levels, as the problem persists regardless of that patch.

Thanks, Odeh, for reporting.
I faced the issue in https://www.drupal.org/project/varbase_components/issues/3456935#comment... 🐛 Fix dropdown menu limited to only two levels Fixed

Noted;
Let us have this fixed with a merge request.
Maybe in both Varbase Components and Vartheme BS5

Progress findings:

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

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@popperjs/core'), require('./base-component.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./util/index.js')) :
  typeof define === 'function' && define.amd ? define(['@popperjs/core', './base-component', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './util/index'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Dropdown = factory(global["@popperjs/core"], global.BaseComponent, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Index));
})(this, (function (Popper, BaseComponent, EventHandler, Manipulator, SelectorEngine, index_js) { 'use strict';

Bootstrap 5.3.3 is using "@popperjs/core": "^2.11.8",

https://github.com/twbs/bootstrap/blob/main/package.json#L110C5-L110C33

The 3 file formats are:

• esm (works with import syntax )
• umd (works with
  tags or RequireJS)
• cjs (works with require() syntax)

hi @rajab_natshah
I have switched to bootstrap.bundle.min.js in my projects due to this error, along with other issues related to Bootstrap components. You can read more about it here: https://stackoverflow.com/questions/68750341/bootstrap-5-uncaught-typeer....

However, if you prefer to resolve the issue without transitioning to the bundled version, you must modify the global property from global["@popperjs/core"] to global. Popper in dropdown.js. This adjustment is necessary as it addresses the underlying issue. It is essential to ensure that the global properties are correctly defined and accessible. Utilizing string-based property access (global["@popperjs/core"]) is less common and may lead to complications if the global object properties are not configured as anticipated.

Using bootstrap.bundle.min.js will definitely fix the issue.

But that is not the right way.

That will work if you did this in projects ), but not as it was designed and structured for!!

As we work with SDC - it was requested by Razem ( not to load duplicate libraries, - or not to load extra not-needed JS in components )
This is a step toward moving our work with SDC with React Components.

• Issue #3423174 → : Added Bootstrap ~5.3.0 JavaScript libraries in Varbase Components and only attach them with needed SDC components
• Issue #3423178 → : Moved all Bootstrap ~5.3.0 JavaScript libraries to Single Directory Components (SDC) in Varbase Components

We must find a way to make this work, maybe compile js files in our way.

NOTICE: The Responsive Theme Preview → module is loading its Popper.js library. ( @popperjs/core v2.11.6 )
It is using an old version of popper .. not the 2.11.8 one with Bootstrap 5.3.3

@rajab_natshah,
Hmmm, It's differently an issue but I think it's unrelated to this error since disabling the Responsive Theme Preview module won't fix the error.

I added a patch to test global object properties fix.

That will work for ones, but when we update bootstrap?
it is a nodejs package too ( not a composer one )

The right way to do this is in the webpack.config.init.js
a JS script to re-compile, string manipulate the dropdown.js and tooltip.js
as in this comment 🐛 Error: Uncaught TypeError: Popper__namespace.createPopper is not a function when adding a dropdown in the navbar Needs work

This will allow this to work in Vartheme BS5 and any custom generated cloned theme

we need a commend for updates .. like drush updb but it could be something like drush var-update-theme mytheme

Now the command to do this is yarn theme:init

I will continue with your fix idea .. but in the webpack.config.init.js file

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

✅ Released vartheme_bs5-3.0.3 →

Automatically closed - issue fixed for 2 weeks with no activity.

✅ Released varbase-10.0.2 →