0

I have been reading various articles including this one use jquery functions within spfx webpart but I can't seem to get jQuery to work with my SPFx webpart.

My first attempt was putting the loading in the global scope:

  public constructor() {
    super();
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');

    SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
      SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
      });
    });
  }

Despite being in the constructor, the code above results in an error within my render function (jQuery not defined):

  public render(): void {
        this.domElement.innerHTML = /* etc...*/

      const webpart: ContactFormSimpleWebPartWebPart = this;

      // assign handlers
      jQuery('#btn-submit-contact-form-simple').on('click', function() {
        webpart.SubmitContactFormSimple();
      });

      // assign vars
      this.Category = jQuery('#sel-category');
      this.Message = jQuery('#txt-message');
      this.ErrorContainer = jQuery('#div-contact-form-simple-errors');
  }

Next, I've tried adding the typings for version 2 (which, I understand, is the highest version SPFx supports):

npm install @types/jquery@2.0.48 --save-dev

  "externals": {
    "jquery": {
      "path": "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
      "globalName": "jQuery"
    }
  },

The above results in numerous compile errors similar to the following:

ReferenceError: jQuery is not defined

I even tried adding it directly to the render, which doesn't result in any errors, except that nothing happens! No resulting HTML is shown."):

  public render(): void {

      SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
      SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
          this.domElement.innerHTML = /* etc...*/

          const webpart: ContactFormSimpleWebPartWebPart = this;

          // assign handlers
          jQuery('#btn-submit-contact-form-simple').on('click', function() {
            webpart.SubmitContactFormSimple();
          });

          // assign vars
          this.Category = jQuery('#sel-category');
          this.Message = jQuery('#txt-message');
          this.ErrorContainer = jQuery('#div-contact-form-simple-errors');
      });
    });
  }

I've even tried adding it on the init:

  protected onInit(): Promise<void> {
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');

    SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
      SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
      });
    });

    return Promise.resolve(undefined);
  }

What else can I try to be able to use jQuery in my SPFx webpart?

Edit: When I try to import * as jQuery from 'jQuery' I get this error:

enter image description here

user1477388
  • 20,790
  • 32
  • 144
  • 264
  • Looks like you are loading jQuery and bootstrap into your project with the same `globalExportName` – Devin Prejean May 08 '18 at 15:22
  • Could you post a link to a github repo to pull down? – Devin Prejean May 08 '18 at 15:23
  • Yes, that is how I copied it from some online resource I found. My repository is local. Is there any code I can provide you as clarification? The project is quite the same as the default yeoman template excepting the changes I've made in my class which extends BaseClientSideWebPart. – user1477388 May 08 '18 at 15:40
  • 1
    have you tried to do an `import * as jQuery from 'jQuery'` yet? I found an article online that has a different setup with the externals. Instead of using path and global name just put `"jquery": "https://code.jquery.com/jquery-2.1.1.min.js"` substitute the path you want to use for the js file though. https://blog.mastykarz.nl/sharepoint-framework-client-side-web-parts-jquery-plugins-cdn/ – Devin Prejean May 08 '18 at 15:51
  • I have also tried the alternative in the config.json you recommend, but it doesn't seem to have any effect. I updated the question with a screenshot of what happens when I import from 'jQuery'. Thanks for your help! – user1477388 May 08 '18 at 16:02
  • Oops! When I do `import * as jQuery from 'jquery';` (lower-case jquery) it works! However, I have a question - instead of using the local package, I would prefer to use the SPComponentLoader as I can also load bootstrap 4 which only works with higher levels of jquery. Is my approach correct - using the constructor? Or, how else can I use bootstrap 4 with SPFx is there any way? – user1477388 May 08 '18 at 16:18
  • Nevermind :) It works with bootstrap 4 and jquery 3. I read online that it didn't but that appears to be false. Thanks for your great help! – user1477388 May 08 '18 at 16:48

1 Answers1

2

have you tried to do an import * as jQuery from 'jQuery' yet? I found an article online that has a different setup with the externals. Instead of using path and global name just put "jquery": "https://code.jquery.com/jquery-2.1.1.min.js" substitute the path you want to use for the js file though.

https://blog.mastykarz.nl/sharepoint-framework-client-side-web-parts-jquery-plugins-cdn/

Devin Prejean
  • 626
  • 6
  • 12