5

I have been struggling with getting bootstrap-dialog to work in an spfx client web part. So far I was able to get jquery, bootstrap, datatables working but can't seem to get bootstrap-dialog working. Has anyone had any luck with this?

First I was trying to add the library into the externals section of the config.json but never got this working.

I ended up just using this line in my web part render method:

SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.js',  { globalExportsName: 'jQuery' }).then((): void => {        
  });

Adding the bootstrap-dialog css the same way...

SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.css');

Using the development tools in Chrome, I can see that this library is successfully called but I get the error message in the console:

Uncaught ReferenceError: BootstrapDialog is not defined at HTMLAnchorElement. (SpfxWebPart.ts:218) at HTMLDocument.dispatch (jquery.js:5206) at HTMLDocument.elemData.handle (jquery.js:5014) (anonymous) @ SpfxWebPart.ts:218 dispatch @ jquery.js:5206 elemData.handle @ jquery.js:5014

enter image description here

Improve this question
1
  • I still haven't figured out how to get this working, I tried moving both bootstrap and bootstrap-dialog into the externals section of the config.json file and then importing them into the web part and I get an error 'failed to load path dependency bootstrap-dialog'. I decided to just use bootstrap modal functionality which looks and feels pretty much the same. I created a blog post about detailing the entire solution here - everythingsharepoint.blogspot.com/2017/04/…
    – pforsthoff
    Apr 6, 2017 at 13:54

1 Answer 1

Reset to default
2

In order to load jQuery, bootstrap and bootstrap-dialog you should use the config file, that will enable the framework to handle all the loading for you.

In order to do so, your config file should have an "externals" part like this:

"externals": {
  "jquery": {
    "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js",
    "globalName": "jQuery"
  },
  "bootstrap": {
    "path": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js",
    "globalDependencies": ["jQuery"]
  },
  "bootstrap-dialog": {
    "path": "https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.js",
    "globalDependencies": ["jQuery"]
  }
}

A couple notes on this, globalDependencies are needed in order to load each library in the right order. Both jQuery and bootstrap are regular JavaScript file (the first stays in the window, the second expands on jQuery). Bootstrap-dialog is loaded as a AMD module, as it executes this line

define("bootstrap-dialog", ["jquery", "bootstrap"], function ($) { ...

In this case the dependencies are resolved by name, so you need to declare the externals with those exact names.

"Unable to load relative-path.invalid/bootstrap" message shows because it's trying to load the "bootstrap" dependency from the AMD module, but it hasn't been defined properly.

If you try to use loadScript() for bootstrap-dialog you might run into problems as it's not executed as a regular script but in reality it's an AMD module, and that requires some additional configuration that the loadScript() doesn't handle.

For the CSS keep using loadCss() in the code.

Improve this answer
2
  • Thanks Marc, so can you tell me what the references will look like for these external dependencies? I tried - import * as jQuery from 'jquery'; import * as bootstrap from 'bootstrap';import * as BootstrapDialog from 'dialog'; but I get the intellisense issue with the bootstrap-dialog as it doesnt know what this is. For jquery and bootstrap these have been installed using node package manager and are available via the node_modules folder, so they resolve correctly.
    – pforsthoff
    Apr 10, 2017 at 21:59
  • Because that doesn't have any types, you will be on your own. What you can do is: const bootstrapDialog: any = require('bootstrap-dialog'); That will give you the object, but without its typings. The parameter of the require statement should be the same one that you used for the config (so not "dialog" but "bootstrap-dialog", using the config I provided)
    – Marc Pasarin
    Apr 12, 2017 at 0:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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