SPFX - jQuery causing build to fail

[James Brennan]

Hi, 

I have an issue building a SPFX web part which I think is probably going to be caused by myself being a complete novice rather than any kind of bug etc. 

When I create a new web part using the Yoeman generator and then add the references to jQuery my build fails with around 1067 task errors. The following are a selection of the errors:

Error - typescript - node_modules\@types\jquery\index.d.ts(40,45): error TS1005: ',' expected.
Error - typescript - node_modules\@types\jquery\index.d.ts(6139,71): error TS1109: Expression expected.
Error - typescript - node_modules\@types\jquery\index.d.ts(7350,71): error TS1139: Type parameter declaration expected.
Error - typescript - node_modules\@types\jquery\index.d.ts(7350,77): error TS1109: Expression expected.
Error - typescript - node_modules\@types\jquery\index.d.ts(7350,85): error TS2695: Left side of comma operator is unused and has no side effects.
Error - typescript - node_modules\@types\jquery\index.d.ts(7350,102): error TS2304: Cannot find name 'TCurrentTarget'.
Error - typescript - node_modules\@types\jquery\index.d.ts(7350,125): error TS2339: Property 'Event' does not exist on type 'typeof JQuery'.
Error - typescript - node_modules\@types\jquery\index.d.ts(7350,131): error TS2304: Cannot find name 'TCurrentTarget'.
Error - typescript - node_modules\@types\jquery\index.d.ts(7350,147): error TS2304: Cannot find name 'TData'.
Error - typescript - node_modules\@types\jquery\index.d.ts(7350,155): error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.
Error - typescript - node_modules\@types\jquery\index.d.ts(7502,33): error TS2314: Generic type 'Callbacks<T, Function>' requires 2 type argument(s).
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).
Error - typescript - node_modules\@types\jquery\index.d.ts(7504,41): error TS2314: Generic type 'Event<TTarget, EventTarget, TData>' requires 3 type argument(s).
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).
Error - typescript - node_modules\@types\jquery\index.d.ts(7506,37): error TS2314: Generic type 'AjaxSettings<TContext, any>' requires 2 type argument(s).
Error - typescript - node_modules\@types\jquery\index.d.ts(7510,28): error TS2314: Generic type 'jqXHR<TResolve, any>' requires 2 type argument(s).
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).
Error - typescript - node_modules\@types\jquery\index.d.ts(7517,32): error TS2314: Generic type 'PlainObject<T, any>' requires 2 type argument(s).
Error - 'typescript' sub task errored after 4.27 s

To achieve this feat, I have added the following items to my project: 

Run the following npm commands:

NOTE: During testing I haven't always run the npm install jquery --save-dev command, mainly the @types/jquery one.

npm install @types/jquery --save-dev
npm install jquery --save-dev

The following items were taken from Waldek Mastykarz blog, https://blog.mastykarz.nl/sharepoint-framework-client-side-web-parts-jquery-plugins-cdn/

Config.json

"externals": {
    "jquery": {
      "path": "https://code.jquery.com/jquery-2.1.1.min.js",
      "globalName": "jQuery"
    } 
  },

MyWebPartWebPart.ts

import * as jQuery from 'jquery';

I don't have any code using jQuery just yet as I am still getting to know SPFX and typescript, but the steps outlined above do seem to allow me to include the import * as jQuery from 'jquery'; statement without the work jquery being underlined in red. 

Does anyone have any pointers or tips as to where I might be going wrong? For example, it might be correct that my web part should fail at this point?

Thanks in advance :)

James. 

[#2 · Accepted solution]

When you're installing jQuery using npm (npm install jquery) you're installing the latest version of jQuery, same with @types/jquery. The latest version of jQuery does not work with SPFx (to be exact the TypeScript version used in SPFx). You need to install version 2 of jQuery:

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

[#3]

Thanks Wictor, this resolved my build issue and I've learnt something new.

Cheers!

James.