3

I am following a tutorial from Microsoft docs and trying to import jQuery files into my client web part but getting error. https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part

I am trying to load jquery and jqueryUI from CDN in my typescript file, I have added typings for both

npm install --save @types/jquery@2 npm install --save @types/jqueryui

config.json look like this

enter image description here

In my type script file, I am trying to reference them with these lines

import * as $ from 'jquery';

import 'jqueryui';

I am getting this error in web part.

enter image description here

i can also see that both typings have been installed successfully

enter image description here

How can I fix this issue?

here is my tsconfig.json

enter image description here

Update

if I load jqury alone, it works fine but when I load both jquery and jqueryUI, I get this error.

  • Sometimes when it doesn't detects modules, running 'gulp serve' command solves the issue. – mohd tahir May 1 '18 at 3:24
  • I am running gulp serve after every change. – Ali May 14 '18 at 1:42
3

If you look closely in that index.d.ts file for jquery-ui, you will not find any module export statement.
And when you import it like import * as ui from 'jqueryui' you try to load all exports(which are not there) in one variable named ui. jquery ui defines extensions on jquery so you have to use it like import 'jqueryui'

EDIT: Answer to Updated issue

Issue is coming because jquery is not being loaded by the web part since it is not coming as dependency in generated webpart js file, but it is required by jquery-ui (in your case dist/j-query-accordion-web-part.js) as shown below

enter image description here

To resolve this issue add any JQuery statement in your "JQueryAccordionWebPart.ts" file render method for instance
$(".accordion").accordion();

It worked for me, hope it works for you. Also for your comment that it works when "import 'jqueryui'" statement is commented, it works because in that case neither jquery nor jquery-ui is being specified as dependency of webpart

  • I tried that but web part is now throwing error "***Failed to load path dependency "jqueryui" from component " – Ali May 10 '18 at 0:17
  • If you run your code with "http" url you will get error because call to http resource is blocked, if origin is https secured. So if you are specifying jquery-ui using http url, please change it to https. If problem still persists please share your full code. – Shashank May 11 '18 at 12:08
  • screenshot updated, both references are now https and workbench is also localhost:4321/temp/workbench.html, if I load jqury alone, it works fine but wheb I load both jquery abd jqueryUI, I get this error. – Ali May 14 '18 at 0:22
  • If I follow that tutorial and your changes I am not getting any error. Can you confirm that you are on latest version of framework and also try gulp clean then gulp serve. If problem still persists you can share your solution on github or somewhere. – Shashank May 14 '18 at 4:20
  • i have uploaded code here dropbox.com/s/td0jxzjdlpnpqta/jquery-webpart.zip?dl=0 – Ali May 14 '18 at 4:33
1

As we see on config.json screenshot jQuery UI file reference is not trusted. So please replace you jQuery ui file reference.

http://code.jquery.com/ui/1.11.4/jquery-ui.min.js

with

https://code.jquery.com/ui/1.11.4/jquery-ui.min.js
  • I changed that to https and did a gulp serve but still getting error. – Ali May 2 '18 at 2:39
1

Try like this: import 'jqueryui';

0

As @shashank did, I just added the jQuery().accordion() to the render method and worked for me:

jQuery('.accordion', this.domElement).accordion(accordionOptions);

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.