Add jQuery in Client Web part (SPFX)

Question

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

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.

i can also see that both typings have been installed successfully

How can I fix this issue?

here is my tsconfig.json

Update

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

Answer 1

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

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

Answer 2

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

Answer 3

Try like this: import 'jqueryui';

Answer 4

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

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