Importing jquery in spfx application

Question

I have followed the below steps to start using jquery in spfx.

1. Install the typings for jQuery:

   npm install --save @types/jquery

2. Update the config.json in the config folder to load jQuery from CDN. Add an entry to the externals field:

   "jquery": "https://code.jquery.com/jquery-3.1.0.min.js"

3. Import jQuery in your web part:

   import * as $ from 'jquery';

Upto step 2 my application is working fine but after adding step 3 I start getting error:-

Error - typescript - node_modules\@types\jquery\index.d.ts(2960,62):error TS2304: Cannot find name 'Iterable'.
[13:44:35] Error - 'typescript' sub task errored after 1.68 s
TypeScript error(s) occurred.

Answer 1

If I’m not wrong, jQuery@3 and its type definitions require a newer version of TypeScript which you can’t use in SPFx. Instead you should use jQuery@2 and @types/jquery@2

Answer 2

In SPFX solution, please use Jquery-2.2.4.js instead:

"jquery": "https://code.jquery.com/jquery-2.2.4.js",
"simpleWeather": {
  "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js",
  "globalName": "jQuery"
}

Official Reference: Use existing JavaScript libraries in SharePoint Framework client-side web parts