Sp-dev-docs: JQuery Accordion Tutorial not compiling (latest JQuery version issue?)

[PzKfWg]

Category

• [ ] Question
• [ ] Typo
• [X] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Following the tutorial, there should be no error compiling.
https://github.com/sharepoint/sp-dev-docs/tree/staging/docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md

Observed Behavior

Following SPFx JQuery Accordion Tutorial, (m#0Y!2E6yZLk) , I can't compile as of 2017-06-30. Errors:
Error - typescript - node_modules\@types\jquery\index.d.ts(40,39): error TS1005: ',' expected.
Error - typescript - node_modules\@types\jquery\index.d.ts(2393,39): error TS1005: ',' expected.
Error - typescript - node_modules\@types\jquery\index.d.ts(2395,45): error TS1005: ',' expected.
Error - typescript - node_modules\@types\jquery\index.d.ts(2475,27): error TS1005: ',' expected.
[...]
Error - typescript - node_modules\@types\jqueryui\index.d.ts(23,19): error TS2314: Generic type 'JQuery' requires 2 type argument(s).
Error - typescript - node_modules\@types\jqueryui\index.d.ts(24,19): error TS2314: Generic type 'JQuery' requires 2 type argument(s).

Steps to Reproduce

Just started from scratch the tutorial (installed all the tool chains in June 2017 following previous tutorials).
Other thoughts: Tutorial does not mention which version of TypeScript to use and VS Code asks wether to use 2.2.2 (workspace version) or 2.3.4 (VSCode version). I tried both.
Also, JQuery is referenced for latest version. In package.json, I have:

 "dependencies": {
    "@microsoft/sp-core-library": "~1.1.0",
    "@microsoft/sp-webpart-base": "~1.1.1",
    "@types/jquery": "^3.2.5",
    "@types/jqueryui": "^1.11.34",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "jquery": "^3.2.1",
    "jqueryui": "^1.11.1"
  },

So, 3.2.5 for types and 3.2.1 for the actual code. The tutorial does not mention which version works and I am not yet familiar with the way to reference other versions (~, ^...). I tried to change both for 2.0.47, but it did not change anything and I am unsure I did it right.

Thanks!

[PzKfWg]

Solved the issue by changing jQuery version to 2.2.4 and types to 2.0.48 in dependencies and running again npm install to update the version. My file looks like this:
"dependencies": { "@microsoft/sp-core-library": "~1.1.0", "@microsoft/sp-webpart-base": "~1.1.1", "@types/jquery": "2.0.48", "@types/jqueryui": "^1.11.34", "@types/webpack-env": ">=1.12.1 <1.14.0", "jquery": "2.2.4", "jqueryui": "^1.11.1" },
I still think that the tutorial should mention this.

[GodTigga]

I've had the same issue and I've just tried implementing your fix. Unfortunately i get errors after running npm install. Here's a full list of error messages received:
npm ERR! registry error parsing json
npm ERR! registry error parsing json
npm ERR! registry error parsing json
npm ERR! fetch failed https://registry.npmjs.org/@types/jquery/-/jquery-2.0.48.tgz
npm WARN retry will retry, error on last attempt: Error: fetch failed with status code 503
npm ERR! fetch failed https://registry.npmjs.org/@types/jquery/-/jquery-2.0.48.tgz
npm WARN retry will retry, error on last attempt: Error: fetch failed with status code 503
npm ERR! fetch failed https://registry.npmjs.org/@types/jquery/-/jquery-2.0.48.tgz
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\TigerB\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v7.8.0
npm ERR! npm v3.10.10

npm ERR! fetch failed with status code 503
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! C:\Winscriberec\SPFX Projects\jquery-webpartnpm-debug.log

Did you experience the same issue?

[PzKfWg]

Nope, never seen this message. Maybe copy here your whole package.json and config.json ?

[GodTigga]

Hi there,

Here's my config.json
{
"entries": [
{
"entry": "./lib/webparts/jQuery/JQueryWebPart.js",
"manifest": "./src/webparts/jQuery/JQueryWebPart.manifest.json",
"outputPath": "./dist/j-query.bundle.js"
}
],
"externals": {
"jquery":"node_modules/jquery/dist/jquery.min.js",
"jqueryui":"node_modules/jqueryui/jquery-ui.min.js"
},
"localizedResources": {
"jQueryStrings": "webparts/jQuery/loc/{locale}.js"
}
}

And the Package.json
{
"name": "jquery-webpart",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"dependencies": {
"@microsoft/sp-core-library": "~1.1.0",
"@microsoft/sp-webpart-base": "~1.1.1",
"@types/jquery": "2.0.48",
"@types/jqueryui": "^1.11.34",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"jquery": "2.2.4",
"jqueryui": "^1.11.1"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.1.0",
"@microsoft/sp-module-interfaces": "~1.1.0",
"@microsoft/sp-webpart-workbench": "~1.1.0",
"gulp": "~3.9.1",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
}
}

Who knows maybe I'm missing something obvious.

[PzKfWg]

Hi, mine are identical, so I don't know what could be wrong. When I made the changes, I did a couple of "npm install" and "npm update". Maybe the "npm update" could work for you. Also, I had an issue with having multiple consoles (CS Code integrated console vs normal node.js cmd) and they were conflicting on file locks, so make sure to only use a single console. That was not the same error though.

Finally, I played quite a bit with this tutorial, so maybe I did something I am not aware too.

I attach my project files (except for the big "node_module" folder), if it can help.

I don't have experience with NPM, so I don't think that I can help more... Good luck!

jquery-webpart.zip

[GodTigga]

hi there, thanks for your help, i sorted mine out by running "npm update".

So i believe the full process is to update the dependencies and then do "npm update" to save the changes.

[PzKfWg]

Glad you made it!

Télécharger Outlook for Android

---

From: GodTigga [e-mail]
Sent: Tuesday, July 4, 2017 2:51:58 AM
To: SharePoint/sp-dev-docs
Cc: Francis; Author
Subject: Re: [SharePoint/sp-dev-docs] JQuery Accordion Tutorial not compiling (latest JQuery version issue?) (#682)

hi there, thanks for your help, i sorted mine out by running "npm update".

So i believe the full process is to update the dependencies and then do "npm update" to save the changes.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/SharePoint/sp-dev-docs/issues/682#issuecomment-312795334, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AXydg-kO8AEI1YS8SWsRj7n_iyzQyu0uks5sKeEOgaJpZM4OKkJQ.

[PzKfWg]

Seems exact explanation is here: https://blog.mastykarz.nl/typescript-version-sharepoint-framework-projects/?utm_content=buffer382a2&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
Jquery v3 incompatible with TypeScript 2.2.2 that comes with SPFx 1.1.1

[jeffangama]

ive added some comments in waldek blog post to explain how to fix it

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues