SOLVED

SPFX - jQuery causing build to fail

%3CLINGO-SUB%20id%3D%22lingo-sub-92948%22%20slang%3D%22en-US%22%3ESPFX%20-%20jQuery%20causing%20build%20to%20fail%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-92948%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20an%20issue%20building%20a%20SPFX%20web%20part%20which%20I%20think%20is%20probably%20going%20to%20be%20caused%20by%20myself%20being%20a%20complete%20novice%20rather%20than%20any%20kind%20of%20bug%20etc.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhen%20I%20create%20a%20new%20web%20part%20using%20the%20Yoeman%20generator%20and%20then%20add%20the%20references%20to%20jQuery%20my%20build%20fails%20with%20around%201067%20task%20errors.%20The%20following%20are%20a%20selection%20of%20the%20errors%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(40%2C45)%3A%20error%20TS1005%3A%20'%2C'%20expected.%0AError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(6139%2C71)%3A%20error%20TS1109%3A%20Expression%20expected.%0AError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7350%2C71)%3A%20error%20TS1139%3A%20Type%20parameter%20declaration%20expected.%0AError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7350%2C77)%3A%20error%20TS1109%3A%20Expression%20expected.%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7350%2C85)%3A%20error%20TS2695%3A%20Left%20side%20of%20comma%20operator%20is%20unused%20and%20has%20no%20side%20effects.%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7350%2C102)%3A%20error%20TS2304%3A%20Cannot%20find%20name%20'TCurrentTarget'.%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7350%2C125)%3A%20error%20TS2339%3A%20Property%20'Event'%20does%20not%20exist%20on%20type%20'typeof%20JQuery'.%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7350%2C131)%3A%20error%20TS2304%3A%20Cannot%20find%20name%20'TCurrentTarget'.%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7350%2C147)%3A%20error%20TS2304%3A%20Cannot%20find%20name%20'TData'.%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7350%2C155)%3A%20error%20TS2363%3A%20The%20right-hand%20side%20of%20an%20arithmetic%20operation%20must%20be%20of%20type%20'any'%2C%20'number'%20or%20an%20enum%20type.%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7502%2C33)%3A%20error%20TS2314%3A%20Generic%20type%20'Callbacks%3CT%3E'%20requires%202%20type%20argument(s).%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7503%2C36)%3A%20error%20TS2314%3A%20Generic%20type%20'Deferred'%20requires%204%20type%20argument(s).%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7504%2C41)%3A%20error%20TS2314%3A%20Generic%20type%20'Event%3CTTARGET%3E'%20requires%203%20type%20argument(s).%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7505%2C36)%3A%20error%20TS2314%3A%20Generic%20type%20'Deferred'%20requires%204%20type%20argument(s).%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7506%2C37)%3A%20error%20TS2314%3A%20Generic%20type%20'AjaxSettings%3CTCONTEXT%3E'%20requires%202%20type%20argument(s).%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7510%2C28)%3A%20error%20TS2314%3A%20Generic%20type%20'jqXHR%3CTRESOLVE%3E'%20requires%202%20type%20argument(s).%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7511%2C35)%3A%20error%20TS2314%3A%20Generic%20type%20'Promise'%20requires%204%20type%20argument(s).%3CBR%20%2F%3EError%20-%20typescript%20-%20node_modules%5C%40types%5Cjquery%5Cindex.d.ts(7517%2C32)%3A%20error%20TS2314%3A%20Generic%20type%20'PlainObject%3CT%3E'%20requires%202%20type%20argument(s).%3CBR%20%2F%3EError%20-%20'typescript'%20sub%20task%20errored%20after%204.27%20s%3C%2FT%3E%3C%2FTRESOLVE%3E%3C%2FTCONTEXT%3E%3C%2FTTARGET%3E%3C%2FT%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETo%20achieve%20this%20feat%2C%20I%20have%20added%20the%20following%20items%20to%20my%20project%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3ERun%20the%20following%20npm%20commands%3A%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3ENOTE%3A%20During%20testing%20I%20haven't%20always%20run%20the%20npm%20install%20jquery%20--save-dev%20command%2C%20mainly%20the%26nbsp%3B%40types%2Fjquery%20one.%3C%2FP%3E%3CPRE%3Enpm%20install%20%40types%2Fjquery%20--save-dev%0Anpm%20install%20jquery%20--save-dev%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20following%20items%20were%20taken%20from%20Waldek%20Mastykarz%20blog%2C%20%3CA%20href%3D%22https%3A%2F%2Fblog.mastykarz.nl%2Fsharepoint-framework-client-side-web-parts-jquery-plugins-cdn%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fblog.mastykarz.nl%2Fsharepoint-framework-client-side-web-parts-jquery-plugins-cdn%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EConfig.json%3C%2FSTRONG%3E%3C%2FP%3E%3CPRE%3E%22externals%22%3A%20%7B%0A%20%20%20%20%22jquery%22%3A%20%7B%0A%20%20%20%20%20%20%22path%22%3A%20%22https%3A%2F%2Fcode.jquery.com%2Fjquery-2.1.1.min.js%22%2C%0A%20%20%20%20%20%20%22globalName%22%3A%20%22jQuery%22%0A%20%20%20%20%7D%20%0A%20%20%7D%2C%3C%2FPRE%3E%3CP%3E%3CSTRONG%3EMyWebPartWebPart.ts%3C%2FSTRONG%3E%3C%2FP%3E%3CPRE%3Eimport%20*%20as%20jQuery%20from%20'jquery'%3B%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20don't%20have%20any%20code%20using%20jQuery%20just%20yet%20as%20I%20am%20still%20getting%20to%20know%20SPFX%20and%20typescript%2C%20but%20the%20steps%20outlined%20above%20do%20seem%20to%20allow%20me%20to%20include%20the%26nbsp%3B%3CSPAN%3Eimport%3C%2FSPAN%3E%20%3CSPAN%3E*%3C%2FSPAN%3E%20%3CSPAN%3Eas%3C%2FSPAN%3E%20%3CSPAN%3EjQuery%3C%2FSPAN%3E%20%3CSPAN%3Efrom%3C%2FSPAN%3E%20%3CSPAN%3E'jquery'%3C%2FSPAN%3E%3CSPAN%3E%3B%20statement%20without%20the%20work%20jquery%20being%20underlined%20in%20red.%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EDoes%20anyone%20have%20any%20pointers%20or%20tips%20as%20to%20where%20I%20might%20be%20going%20wrong%3F%20For%20example%2C%20it%20might%20be%20correct%20that%20my%20web%20part%20should%20fail%20at%20this%20point%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThanks%20in%20advance%20%3A)%3C%2Fimg%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EJames.%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-92948%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESPFx%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-92960%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20-%20jQuery%20causing%20build%20to%20fail%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-92960%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20Wictor%2C%20this%20resolved%20my%20build%20issue%20and%20I've%20learnt%20something%20new.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECheers!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EJames.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-92958%22%20slang%3D%22en-US%22%3ERe%3A%20SPFX%20-%20jQuery%20causing%20build%20to%20fail%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-92958%22%20slang%3D%22en-US%22%3E%3CP%3EWhen%20you're%20installing%20jQuery%20using%20npm%20(npm%20install%20jquery)%20you're%20installing%20the%20latest%20version%20of%20jQuery%2C%20same%20with%26nbsp%3B%40types%2Fjquery.%20The%20latest%20version%20of%20jQuery%20does%20not%20work%20with%20SPFx%20(to%20be%20exact%20the%20TypeScript%20version%20used%20in%20SPFx).%20You%20need%20to%20install%20version%202%20of%20jQuery%3A%3C%2FP%3E%3CPRE%3Enpm%20install%20jquery%402%20%40types%2Fjquery%402%20--save%3C%2FPRE%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

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 Replies
Highlighted
Best Response confirmed by James Brennan (Contributor)
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
Highlighted

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

 

Cheers!

 

James.