3

We are trying to inject jquery sharepoint services dependency to our sharepoint framework webpart.

This is what we did. First added external files at config.json

"externals": {
  "jQuery": {
    //"path": "/src/webparts/profileService/scripts/jquery.js",
    "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "globalName": "jQuery"
  },
  "SPServices": {
    //"path": "/src/webparts/profileService/scripts/jquery.SPServices-2014.02.js",
    "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.js",
    "globalName": "SPServices"
    ,"globalDependencies": ["jQuery"] //["jQuery"]
  }
},

Secondly at webpart we imported it

import * as $ from 'jquery';
require('jQuery');
require('SPServices');

Then made the call,

//let services = (<any>jQuery()).SPServices;
let services = (<any>$()).SPServices;
console.dir(services);

That returned with undefined. In addition to that console threw another error.

Uncaught (in promise) Error:
***Failed to load path dependency "SPServices" from component "xxx" (MyWebPart).

We thought maybe loading jQuery twice was causing the error. So we tried without using the import * as $ from 'jquery'; like this

const jq = require('jQuery');
require('SPServices');

And

const sps = jq.SPServices;
console.log(sps);

This also yields the same result. That's we got the aforementioned error at console.

What are we doing wrong?

Versions of JavaScript Libraries used
jquery: 1.11.3
jquery.SPServices: 2014.02
@microsoft/spfx: 5.6.0


My bad, if we use const sps = jq().SPServices; I get the object. But the error persists,

enter image description here

4

Modify your config.json file to use the globalName property of jQuery. The global variable name, specified by using the globalName property, is the name known to other scripts such as plug-ins built on top of the library.

It should be as below:

"externals": {
    "jquery": {
      "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
      "globalName": "jQuery"
    },
    "SPServices": {
      "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.js",
      "globalName": "jQuery",
      "globalDependencies": [ "jquery" ]
    }
  },

After that, you should modify your import statements as below in your React component (.tsx) file or your webpart typescript file (.ts) :

import { escape } from '@microsoft/sp-lodash-subset';
// other import statements
const $: any = require("jquery");
require('SPServices');

Now, in your render method you will be able to use it as

$(document).ready(function() {
      $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "Alerts",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
        completefunc: function (xData, Status) {
          console.log(xData);
          $(xData.responseXML).SPFilterNode("z:row").each(function() {
            console.log($(this).attr("ows_Title"))            
          });
        }
      });
    });

Reference - Use existing JavaScript libraries in SharePoint Framework client-side web parts

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.