0

I have created SPFx extension (not a webpart, in case it makes any difference) and trying to add jQuery but its not doing it. I have installed it into package with
npm install --save @types/jquery
added

"externals": {
      "jquery": "./src/extensions/tracker2/js/JQuery_3.5.1.js"
  },

into config.json ,
import * as jQuery from 'jquery';
into MyPackage.ts
But still getting " jQuery is not defined " when trying to use jQuery in my code.

Thanks

2
  • Have you tried with a small 'q' => jquery ? Jan 5, 2021 at 21:54
  • Just a little addition - I am using external js file: extends BaseApplicationCustomizer<ITracker2ApplicationCustomizerProperties> { private _JS: string = "MyTenant.sharepoint.com/sites/DevHubSite/SiteAssets/CustomJS/…"; @override public onInit(): Promise<void> { let articleRedirectScriptTag: HTMLScriptElement = document.createElement("script"); articleRedirectScriptTag.src = this._JS; articleRedirectScriptTag.type = "text/javascript"; document.body.appendChild(articleRedirectScriptTag);" Jan 8, 2021 at 17:27

3 Answers 3

0

The issue is that you din't isntall jquery.

@types/jquery package does not actually contain jQuery. All packages that start with @types prefix are merely definition files that help your TypeScript to have intellisese.

In install jquery you need jquery package:

npm install jquery --save 

Then, to use the package:

import $ from "jquery";

Update

I have read the Official MS documentation and they are using the following link:

"jquery": "https://code.jquery.com/jquery-3.1.0.min.js"

Perhaps, if you update the link and then run the following commands, the error will go away:

gulp clean
gulp build
1
  • Tried it - still not defined :( Jan 6, 2021 at 9:33
0

I tried your method in an extension, here it works fine.

enter image description here enter image description here

Can you have a check if the referenced path/filename is correct? And you can check if jquery file has been loaded or not using F12.

enter image description here

BR

1
  • I tried same setup you showed and its still not working, JQuery file is not loading (its not there when I check by pressing F12) :( Jan 8, 2021 at 16:43
0

Started working when I added one line with jQuery into "public onInit()"
As I mentioned I have one js file that I import with
"let articleRedirectScriptTag: HTMLScriptElement = document.createElement("script");"
In which I also have some jquey.
Thanks for all your replies.

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.