2

ello,

I know there are couple of ways to load bootstrap in our SPFx webpart. But it seems there is some inconsistency on how to add its reference in webpart.ts

I am trying to load bootstrap.min.js with below options.

Installed dependencies.

npm install jquery --save 
npm install @types/jquery --save 
npm install bootstrap --save 
npm install @types/bootstrap --save

Option 1 - NOT WORKED

in webpart.ts imported module

import * as jQuery from 'jquery';
import * as bootstrap from 'bootstrap';

This is not loading bootstrap.min.js - button clicks on boostrap UI are not working

Option 2 - NOT WORKED...add external js libraries dependencies in config.js

"externals": {
   "jquery": {
     "path": "node_modules/jquery/dist/jquery.min.js",
     "globalName": "jQuery"
   },
   "bootstrap": {
     "path": "node_modules/bootstrap/dist/js/bootstrap.min.js",
     "globalName": "bootstrap",
     "globalDependencies": ["jquery"]
   }

 },

in webpart.ts imported module

    import * as jQuery from 'jquery';
    import * as bootstrap from 'bootstrap';

option 3- using spcompnent loader to load local bootstrap file - NOT WORKED.

SPComponentLoader.loadScript("node_modules/bootstrap/dist/js/bootstrap.min.js");

ONLY THING I COULD MAKE IT WORK IS BY USING

SPComponentLoader.loadScript("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js");

I need to know what is correct an reliable way to load bootstrap or any external js file

  1. Loading from external CDN
  2. Loading from local CDN(with node modules path)
1
  • Hello @Siddharth, Did you find any answer for this? I am also facing the same issue, If I pass Online CDN it loads bootstrap. But local reference doesn't work for me.!! Please suggest if you find any answer. Commented Aug 27, 2020 at 6:04

1 Answer 1

0

I've faced the same issue and found the solution here: Issues Loading External JS Library from CDN in a SharePoint Framework (SPFX) Web Part

I basically replaced my imports by:

//import * as jQuery from "jquery";
var jQuery:any = require('jquery');
//import * as bootstrap from "bootstrap";
var bootstrap:any = require('bootstrap');

I've been able to see in my command prompt that the javascript libraries were correctly loaded and the bootstrap javascript worked (Button clicks works)

Hope this helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.