jquerytypescriptsharepointyospfx

SPFx can't use JQuery?

I'm working on a brand new SharePoint Web Part using SPFx created by Yeoman, the scaffolding template is fine, adding the NPMs for JQuery and JQueryUI also get not a single problem, I see GULP SERVE running in the background without any errors.

The problem happens when I add the following line inside my JQWebPart.ts:

      import * as jQuery from 'jquery';

Once the line above is added the GULP SERVE outputs a very long list of errors, below are the last lines from all the errors:

[16:54:06] Error - typescript - node_modules\@types\jquery\index.d.ts(7502,33): error TS2314: Generic type 'Callbacks<T, Function>' requires 2 type argument(s).
[16:54:06] Error - typescript - node_modules\@types\jquery\index.d.ts(7503,36): error TS2314: Generic type 'Deferred<TR, TJ, any, TN>' requires 4 type argument(s).
[16:54:06] Error - typescript - node_modules\@types\jquery\index.d.ts(7504,41): error TS2314: Generic type 'Event<TTarget, EventTarget, TData>' requires 3 type argument(s).
[16:54:06] Error - typescript - node_modules\@types\jquery\index.d.ts(7505,36): error TS2314: Generic type 'Deferred<TR, TJ, any, TN>' requires 4 type argument(s).
[16:54:06] Error - typescript - node_modules\@types\jquery\index.d.ts(7506,37): error TS2314: Generic type 'AjaxSettings<TContext, any>' requires 2 type argument(s).
[16:54:06] Error - typescript - node_modules\@types\jquery\index.d.ts(7510,28): error TS2314: Generic type 'jqXHR<TResolve, any>' requires 2 type argument(s).
[16:54:06] Error - typescript - node_modules\@types\jquery\index.d.ts(7511,35): error TS2314: Generic type 'Promise<TR, TJ, any, TN>' requires 4 type argument(s).
[16:54:06] Error - typescript - node_modules\@types\jquery\index.d.ts(7517,32): error TS2314: Generic type 'PlainObject<T, any>' requires 2 type argument(s).
[16:54:06] Finished subtask 'tslint' after 3.95 s
[16:54:06] Error - 'typescript' sub task errored after 3.95 s
 "TypeScript error(s) occurred."

I have no idea what is going on with my Web Part when I try to use JQuery, does any body have any ideas???

Solution

  • Thanks to user Rohit Waghela, there is a solution already in place to solve issues related to JQuery in SPFx:

    https://thechriskent.com/tag/sharepoint-framework/

    The problem is incompatibility between TypeScript and JQuery, so the bottom line here is the following:

    1) remove JQuery: npm uninstall @types/jquery

    2) install compatible version: npm install @types/jquery@2.0.48 --save-dev