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 #3456935: Fix dropdown menu limited to only two levels? Could you describe what happened?

#3456935 was committed, but not released yet.

Thanks, Odeh, for reporting.
I faced the issue in https://www.drupal.org/project/varbase_components/issues/3456935#comment...

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

Using umd in Varbase Components, and Vartheme BS5 The umd format in Bootstrap is doing esm format. This is the issue.

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

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

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

✅ Released vartheme_bs5-3.0.3

✅ Released varbase-10.0.2