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.
