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,