bootstrap menu dropdown not working with SPFX -extensions

Question

I have installed jquery and bootstrap to my spfx projects via npm. The menu loads well but it seems i'm having issues with bootstrap js because when i click on the menu with dropdown(see screenshot below) it doesn't work What am i missing and how should i be referencing the js and css.

Thanks in advance

My css is being loaded by using :-

SPComponentLoader.loadCss('https://menu.sharepoint.com/sites/top/SiteAssets/SPFXBranding/bootstrap.min.css');

In my config.json i have declared external ref js

externals": {
    "jquery":"https://menu.sharepoint.com/sites/top/SiteAssets/SPFXBranding/jquery.min.js",
    "bootstrap":"https://menu.sharepoint.com/sites/top/SiteAssets/SPFXBranding/bootstrap.min.js"
    },

and since i'm just testing the bootstrap menu out i have the html for now hardcoded like below

export default class BootStrapTemplate {

    public static templateHtml: string = `
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Navigation</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul> 

        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>`;

Answer 1

1) If you are adding jquery & bootstrap via CDN, no need to npm install them

2) bootstap components depend on jQuery. So, you need to first load jQuery and then bootstrap js. You can specify the loading order by globalDependencies attribute

3) You can then import these libraries in your files using the import statement.

So, modify your config.json file as below, I am using global CDN, but you can change the path as per your environment requirements:

"externals": {
    "jquery": {
      "path": "https://code.jquery.com/jquery-1.12.4.js",
      "globalName": "jquery"
    },
    "bootstrap": {
      "path": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
      "globalName": "bootstrap",
      "globalDependencies": ["jquery"]
    }
  },

After that, in your webpart typescript file, make the below mentioned changes:

1) add following import statements:

import { SPComponentLoader } from '@microsoft/sp-loader';

import 'jquery';
import 'bootstrap';

2) Add a constructor and then change the render method as below:

export default class TestspfxWebPart extends BaseClientSideWebPart<ITestspfxWebPartProps> {

  public constructor() {
    super();

    SPComponentLoader.loadCss("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
  }

  public render(): void {
    this.domElement.innerHTML = `
    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Navigation</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul> 

        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>`;


  }