'Bootstrap dropdown menu not working (not dropping down when clicked) when bundled with webpack

I have a webpack bundled app where I add some bootstrap elements under a shadowRoot as follows:

#shadow-root (open)
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/browse/[email protected]/dist/jquery.min.js"></script>
</head>
<body>
                  <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown button
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                  </div>
</body>

So when I click the dropdown button, it doesnt work. I tried adding this to my js file

import * as $ from 'jquery';

let shadowRoot = document.getElementById(divID).shadowRoot;
$(shadowRoot).ready(function(){
           console.log('In ready');
            $(shadowRoot).find('.dropdown-toggle').each(function(){
                $(this).dropdown();
            })
        });

Adding this gives me an undefined Type Error stating dropdown() is not a function.

ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_18___default(...)(...).dropdown is not a function

How do I fix this issue?

EDIT:

I added import bootstrap and installed tether, still did't work.

import 'bootstrap';

I've been getting this error stating : Uncaught Error: Bootstrap tooltips require Tether

javascripthtmljquerywebpackbootstrap-4


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions