Resolve bug with tabs not switching

web/index.js

@@ -1,15 +1,14 @@
-import $ from 'jquery';
+import * as $ from 'jquery';
+// NOTE: do NOT import bootstrap proper – interaction with other events
+// just import the precise libraries you need from it
+import 'bootstrap/js/dist/tab';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 import { initI18n } from '@/lib/utils/i18n';
 import { Template } from '@/lib/utils/templates';
 import { getGettingStartedMarkup } from '@/lib/toolbarGettingStarted';
 import { Footer, Toolbar, AppContext } from '@/lib';
 
-// NOTE: do NOT import bootstrap proper – interaction with other events
-// just import the precise libraries you need from it
-import 'bootstrap/js/dist/tab';
-import 'bootstrap/dist/css/bootstrap.min.css';
-
 // Order matters: place this at bottom of imports for CSS overrides
 import '@/web/index.css';
 
@@ -41,7 +40,8 @@ export function createDataHarmonizerTab(dhId, entity, isActive) {
   dhTabLink.id = `tab-${dhId}`;
   dhTabLink.href = `#${dhId}`;
   dhTabLink.textContent = entity;
-  dhTabLink.setAttribute('data-bs-toggle', 'tab'); // Bootstrap specific data attribute for tabs
+  dhTabLink.dataset.toggle = 'tab';
+  dhTabLink.setAttribute('data-bs-toggle', 'tab');  // Bootstrap specific data attribute for tabs
   dhTabLink.setAttribute('data-bs-target', dhTabLink.href);
   dhTabLink.setAttribute('role', 'tab');
   dhTabLink.setAttribute('aria-controls', dhId);