bootstrap script referred in application customizer not loading sometimes

Question

We have created a spfx application customizer for menu. This will be there in all the sitepages. So added the common js and css. We have a page where image will be shown in popup using bootstrap lightbox. Bootstrap js referred in top menu (spfx extension) is not loading sometimes and due to this popup not showing. Also, this issue is occurring only in UAT and Prod environment.

We have referred js and css using require method (eg. require(./bootstrap.js))

Please help to get some idea on why the js not loading all the times and that too it is occurring in UAT and Prod environments.

Answer 1

Hi @Rahini Radha ,

You could try to use SPComponentLoader to load the bootstrap js like the folloing ways:

let cssURL = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";  
SPComponentLoader.loadCss(cssURL);  
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js', {  
    globalExportsName: 'jQuery'  
  }).catch((error) => {  
    console.log("jQuery loader error occurred");  
  }).then(() => {  
   return SPComponentLoader.loadScript("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js");  
  });  

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi @Rahini Radha ,

Looks like you're using popover plugin in the bootstrap: https://getbootstrap.com/docs/4.0/components/popovers/

Popovers rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js in order for popovers to work!

So, you could try to to use the bootstrap.bundle.min.js or the bootstrap.bundle.js instead, you could download it here: https://getbootstrap.com/docs/4.0/getting-started/download/

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

Hi @Rahini Radha ,

Does it work in the workbench of SharePoint 19 site?

Below is my test:

Add below in config.json:

  "externals": {  
    "jquery": {  
      "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js",  
      "globalName": "jquery"  
    },  
    "bootstrap": {  
      "path": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",  
      "globalName": "bootstrap",  
      "globalDependencies": ["jquery"]  
    }  
  },  

In you .ts file:

import * as $ from  'jquery';  
require ('bootstrap')  
import 'bootstrap';  

$("[data-toggle=popover]").popover({  
        html: true,  
        trigger: 'click',  
        placement: 'bottom',  
        content: function () { return '<img src="http://sp19/sites/Comm/SiteAssets/test.jpg" />'; }  
      });